Mirrors/uppy
1
0
Fork 0
mirror of https://github.com/transloadit/uppy.git synced 2026-07-25 03:08:34 +00:00
Code Issues Projects Releases Wiki Activity

Better file type detection

Browse source
This commit is contained in:
Artur Paikin 2016-07-26 19:34:59 -04:00
parent cbda447d5a
commit 024ebfa192
4 changed files with 124 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

68
src/plugins/Modal/FileItem.js
View file

@ -1,31 +1,62 @@
import html from 'yo-yo'
import { fileIcon, checkIcon, removeIcon } from './icons'
import Utils from '../../core/Utils'
import { checkIcon, removeIcon, iconText, iconFile, iconAudio } from './icons'
function getIconByMime (fileTypeGeneral) {
switch (fileTypeGeneral) {
case 'text':
return iconText()
case 'audio':
return iconAudio()
default:
return iconFile()
}
}
export default function fileItem (bus, file) {
const isUploaded = file.progress === 100
const uploadInProgress = file.progress > 0 && file.progress < 100
const remove = (ev) => {
bus.emit('file-remove', file.id)
function remove (ev) {
const el = document.querySelector(`#${file.id}`)
el.classList.add('UppyAnimation-zoomOutLeft')
// this seems to be working in latest Chrome, Firefox and Safari,
// but might not be 100% cross-browser, needs testing
// https://davidwalsh.name/css-animation-callback
el.addEventListener('animationend', () => {
bus.emit('file-remove', file.id)
})
// bus.emit('file-remove', file.id)
}
const truncatedFileName = Utils.truncateString(file.name, 30)
// <h5 class="UppyDashboardItem-previewType">${file.extension ? '.' + file.extension : '?'}</h5>
return html`<li class="UppyDashboardItem"
id="${file.id}"
title="${file.name}">
<div class="UppyDashboardItem-icon">
${file.type.general === 'image' ? file.previewEl : fileIcon(file.type)}
</div>
<h4 class="UppyDashboardItem-name">
${file.uploadURL
? html`<a href="${file.uploadURL}" target="_blank">${file.name}</a>`
: html`<span>${file.name}</span>`
}
<br>
</h4>
<div class="UppyDashboardItem-status">
<div class="UppyDashboardItem-statusSize">${file.totalSize}</div>
${uploadInProgress ? 'Uploading… ' + file.progress + '%' : ''}
${isUploaded ? 'Completed' : ''}
<div class="UppyDashboardItem-preview">
${file.previewEl
? file.previewEl
: html`<div class="UppyDashboardItem-previewIcon">${getIconByMime(file.type.general)}</div>`
}
<div class="UppyDashboardItem-progress ${uploadInProgress ? 'is-active' : ''}">
<div class="UppyDashboardItem-progressNum">${file.progress}%</div>
<div class="UppyDashboardItem-progressInner" style="width: ${file.progress}%"></div>
</div>
</div>
<div class="UppyDashboardItem-info">
<h4 class="UppyDashboardItem-name">
${file.uploadURL
? html`<a href="${file.uploadURL}" target="_blank">${truncatedFileName}</a>`
: truncatedFileName
}
</h4>
<div class="UppyDashboardItem-status">
<span class="UppyDashboardItem-statusSize">${file.totalSize}</span>
</div>
</div>
<div class="UppyDashboardItem-action">
${isUploaded
@ -37,8 +68,5 @@ export default function fileItem (bus, file) {
</button>`
}
</div>
<div class="UppyDashboardItem-progress ${uploadInProgress ? 'is-active' : ''}">
<div class="UppyDashboardItem-progressInner" style="width: ${file.progress}%"></div>
</div>
</li>`
}

2
src/plugins/Modal/index.js
View file

@ -338,7 +338,7 @@ export default class Modal extends Plugin {
<div class="UppyModalContent-bar">
<h2 class="UppyModalContent-title">Import From ${target.name}</h2>
<button class="UppyModalContent-back"
onclick=${this.hideAllPanels}>Back</button>
onclick=${this.hideAllPanels}>Done</button>
</div>
${target.render(state)}
</div>`