FileUploadDialog.js (7168B)
1 Ext.define('PartKeepr.FileUploadDialog', { 2 extend: 'Ext.window.Window', 3 4 title: i18n("File Upload"), 5 fileFieldLabel: i18n("File"), 6 uploadButtonText: i18n('Select File...'), 7 uploadURL: PartKeepr.getBasePath() + "/api/temp_uploaded_files/upload", 8 layout: 'fit', 9 resizable: false, 10 modal: true, 11 defaults: { 12 labelWidth: 80 13 }, 14 initComponent: function () 15 { 16 17 if (this.imageUpload) { 18 this.uploadURL = PartKeepr.getBasePath() + "/api/temp_images/upload"; 19 } 20 21 this.uploadButton = Ext.create("Ext.button.Button", 22 { 23 text: i18n('Upload'), 24 iconCls: 'fugue-icon drive-upload', 25 handler: Ext.bind(function () 26 { 27 var form = this.form.getForm(); 28 29 if (this.fileField.getValue() === "" && this.urlField.getValue() === "") { 30 Ext.Msg.alert(i18n("Error"), i18n("Please select a file to upload or enter an URL")); 31 return; 32 } 33 34 35 if (form.isValid()) { 36 form.submit({ 37 url: this.uploadURL, 38 success: Ext.bind(function (fp, o) 39 { 40 this.fireEvent("fileUploaded", o.result.response); 41 this.close(); 42 }, this), 43 failure: function (form, action) 44 { 45 PartKeepr.ExceptionWindow.showException(action.response); 46 } 47 }); 48 } 49 }, this) 50 }); 51 52 this.urlField = Ext.create("Ext.form.field.Text", { 53 fieldLabel: i18n("URL"), 54 name: "url", 55 anchor: '100%' 56 }); 57 58 this.diskUsage = Ext.create("Ext.ProgressBar", { 59 width: "200px" 60 }); 61 62 this.diskUsage.updateProgress(0, i18n("Loading…")); 63 64 this.tbButtons = [this.diskUsage, '->', this.uploadButton]; 65 66 if (this.imageUpload) { 67 68 this.title = i18n("Image Upload"); 69 this.fileFieldLabel = i18n("Image"); 70 this.uploadButtonText = i18n("Select Image..."); 71 72 this.fileFormatButton = Ext.create("Ext.button.Button", { 73 text: i18n("Available Formats"), 74 iconCls: 'fugue-icon infocard', 75 handler: this.showAvailableFormats, 76 scope: this 77 }); 78 79 this.tbButtons.push(this.fileFormatButton); 80 } 81 82 this.fileField = Ext.create("Ext.form.field.File", { 83 xtype: 'filefield', 84 name: 'userfile', 85 fieldLabel: this.fileFieldLabel, 86 msgTarget: 'side', 87 anchor: '100%', 88 buttonText: this.uploadButtonText 89 }); 90 91 this.uploadSizeButton = Ext.create("Ext.button.Button", { 92 xtype: 'button', 93 iconCls: 'fugue-icon information-frame', 94 handler: this.showUploadSizeInformation, 95 scope: this 96 }); 97 98 this.form = Ext.create('Ext.form.Panel', { 99 width: 500, 100 bodyPadding: 10, 101 border: false, 102 items: [ 103 { 104 html: i18n("Select a file to upload or enter an URL to load the file from"), 105 border: false, 106 style: "margin-bottom: 20px;" 107 }, 108 this.fileField, 109 { 110 xtype: 'fieldcontainer', 111 hideEmptyLabel: false, 112 border: false, 113 style: 'margin-bottom: 20px;', 114 layout: { 115 type: 'hbox', 116 pack: 'start', 117 align: 'middle' 118 }, 119 items: [ 120 { 121 html: sprintf(i18n("Maximum upload size: %s"), 122 PartKeepr.bytesToSize(PartKeepr.getMaxUploadSize())), 123 style: 'margin-right: 10px;', 124 border: false 125 }, 126 this.uploadSizeButton 127 ] 128 }, 129 this.urlField 130 ], 131 dockedItems: [{ 132 xtype: 'toolbar', 133 dock: 'bottom', 134 ui: 'footer', 135 defaults: {minWidth: 120}, 136 items: this.tbButtons 137 }] 138 }); 139 140 this.on("beforedestroy", this.onBeforeDestroy, this); 141 142 this.items = this.form; 143 144 var call = new PartKeepr.ServiceCall("api", "disk_space"); 145 call.setHandler(Ext.bind(this.onDiskSpaceRetrieved, this)); 146 call.doCall(); 147 148 this.callParent(); 149 }, 150 onDiskSpaceRetrieved: function (data) { 151 var usedString = PartKeepr.bytesToSize(data.disk_used), 152 totalString = PartKeepr.bytesToSize(data.disk_total); 153 154 var text = usedString + " / " + totalString + " " + i18n("used"); 155 156 this.diskUsage.updateProgress(data.disk_used / data.disk_total, text); 157 }, 158 /** 159 * Displays a little hint regarding the maximum upload size 160 */ 161 showUploadSizeInformation: function () 162 { 163 if (!this.uploadSizeTip) { 164 this.uploadSizeTip = Ext.create("Ext.tip.ToolTip", { 165 title: i18n("Upload Size Information"), 166 anchor: 'left', 167 width: 350, 168 height: 132, 169 autoScroll: true, 170 target: this.uploadSizeButton.getEl(), 171 closable: true, 172 html: i18n("The maximum upload size can be configured in your php.ini file. There are two separate options:<br/>- post_max_size<br/>- upload_max_filesize<br/><br/>You need to set both values high enough.") + 173 '<br/><br/><a target="_blank" href="http://de2.php.net/manual/en/ini.core.php#ini.post-max-size">' + i18n("More Information") + '</a>', 174 autoHide: false 175 }); 176 } 177 178 179 this.uploadSizeTip.show(); 180 }, 181 /** 182 * Shows a tooltip for all available image formats. 183 */ 184 showAvailableFormats: function () 185 { 186 if (!this.imageFormatsTip) { 187 this.imageFormatsTip = Ext.create("Ext.tip.ToolTip", { 188 title: i18n("Available Image Formats"), 189 anchor: 'left', 190 width: 200, 191 height: 300, 192 autoScroll: true, 193 target: this.fileFormatButton.getEl(), 194 closable: true, 195 html: implode("<br>", PartKeepr.getAvailableImageFormats()), 196 autoHide: false 197 }); 198 } 199 200 201 this.imageFormatsTip.show(); 202 }, 203 onBeforeDestroy: function () 204 { 205 if (this.imageFormatsTip) { 206 this.imageFormatsTip.destroy(); 207 } 208 209 if (this.uploadSizeTip) { 210 this.uploadSizeTip.destroy(); 211 } 212 } 213 });