Hedera.Photos = new Class ({ Extends: Hedera.Form ,filesData: [] ,uploadCount: 0 ,errors: false ,activate: function () { this.$('schema').value = 'catalog'; } ,addFiles: function (files) { if (!files) return; for (var i = 0; i < files.length; i++) this.addFile (files[i]); } ,addFile: function (file) { var doc = document; var div = doc.createElement ('div'); var button = new Htk.Button ({ tip: 'Remove', icon: 'delete' }); button.on ('click', this.onFileRemove, this); div.appendChild (button.node); var thumb = doc.createElement ('img'); thumb.file = file; thumb.className = 'thumb'; div.appendChild (thumb); var reader = new FileReader (); reader.onload = function (e) { thumb.src = e.target.result; }; reader.readAsDataURL(file); var name = doc.createElement ('input'); name.type = 'text'; name.value = getFileName (file.name); div.appendChild (name); var status = doc.createElement ('span'); status.className = 'status'; div.appendChild (status); var fileData = { div: div, file: file, name: name, status: status, sent: false, loading : false }; this.filesData.push (fileData); button.value = fileData; this.$('file-list').appendChild (div); } ,onUploadClick: function () { var filesData = this.filesData; var formData = new FormData(); var count = 0; for (var i = 0; i < filesData.length; i++) { var fileData = filesData[i]; if (!(fileData.sent || fileData.loading)) { formData.append ('image', fileData.file); formData.append ('name', fileData.name.value); formData.append ('schema', this.$('schema').value); formData.append ('srv', 'json:image/upload'); this.conn.sendFormData (formData, this.onFileUpload.bind (this, fileData)); fileData.loading = true; this.uploadCount++; count++; } } if (count === 0) Htk.Toast.showWarning ('There are no files to upload'); } ,onFileUpload: function (fileData, data, error) { fileData.loading = false; if (data) { var iconName = 'ok'; var title = _('ImageAdded'); fileData.sent = true; fileData.name.disabled = true; } else { var iconName = 'error'; var title = error.message; this.errors = true; } var status = fileData.status; Vn.Node.removeChilds (status); var icon = new Htk.Icon ({icon: iconName}); status.appendChild (icon.node); status.title = title; this.uploadCount--; if (this.uploadCount === 0) { if (!this.errors) Htk.Toast.showMessage (_('Upload finished successfully')); else Htk.Toast.showError (_('Some errors happened on upload')); this.errors = false; } } ,onFileRemove: function (button) { var fileData = button.value; this.$('file-list').removeChild (fileData.div); for (var i = 0; i < this.filesData.length; i++) if (this.filesData[i] === fileData) { this.filesData.splice (i, 1); break; } } ,onClearClick: function () { this.filesData = []; Vn.Node.removeChilds (this.$('file-list')); } ,onDropzoneClick: function () { this.$('file').click (); } ,onFileChange: function () { this.addFiles (this.$('file').files); } ,onDragEnter: function (event) { Vn.Node.addClass (this.$('dropzone'), 'dragover'); } ,onDragLeave: function (event) { Vn.Node.removeClass (this.$('dropzone'), 'dragover'); } ,onDragOver: function (event) { event.preventDefault (); } ,onDragEnd: function (event) { Vn.Node.removeClass (this.$('dropzone'), 'dragover'); event.dataTransfer.clearData (); } ,onDrop: function (event) { event.preventDefault (); this.addFiles (event.dataTransfer.files); } }); function getFileName (path) { var barIndex = path.lastIndexOf ('/'); if (barIndex === -1) barIndex = path.lastIndexOf ('\\'); if (barIndex === -1) barIndex = 0; var dotIndex = path.lastIndexOf ('.'); if (dotIndex === -1) dotIndex = 0; return path.substr (barIndex, dotIndex); }