action-localize-helper.js
4 years ago
admin-package.js
4 years ago
admin.js
4 years ago
editor.js
4 years ago
file-upload.js
4 years ago
form-block.js
4 years ago
frontend-forms.js
4 years ago
import-form.js
4 years ago
package.js
4 years ago
re-captcha-v3.js
4 years ago
file-upload.js
353 lines
| 1 | ( function( $ ) { |
| 2 | |
| 3 | "use strict"; |
| 4 | |
| 5 | var JetFormBuilderFileUpload = { |
| 6 | |
| 7 | init: function() { |
| 8 | $( document ) |
| 9 | .on( 'change', '.jet-form-builder-file-upload__input', JetFormBuilderFileUpload.processUpload ) |
| 10 | .on( 'click', '.jet-form-builder-file-upload__file-remove', JetFormBuilderFileUpload.deleteUpload ); |
| 11 | |
| 12 | $( '.jet-form-builder-file-upload__files' ).sortable( { |
| 13 | items: '.jet-form-builder-file-upload__file', |
| 14 | forcePlaceholderSize: true, |
| 15 | } ).bind( 'sortupdate', JetFormBuilderFileUpload.onSortCallback ); |
| 16 | }, |
| 17 | |
| 18 | onSortCallback: function( e, ui ) { |
| 19 | var $upload = ui.item.closest( '.jet-form-builder-file-upload' ), |
| 20 | $files = $( e.target ), |
| 21 | $valueInput = $upload.find( '.jet-form-builder-file-upload__value' ), |
| 22 | args = $files.data( 'args' ), |
| 23 | maxFiles = parseInt( args.max_files, 10 ), |
| 24 | values = []; |
| 25 | |
| 26 | if ( 1 === maxFiles || ! args.insert_attachment ) { |
| 27 | return; |
| 28 | } |
| 29 | |
| 30 | $files.find( '.jet-form-builder-file-upload__file' ).each( function() { |
| 31 | |
| 32 | var $file = $( this ); |
| 33 | |
| 34 | switch ( args.value_format ) { |
| 35 | case 'id': |
| 36 | values.push( $file.data( 'id' ) ); |
| 37 | break; |
| 38 | |
| 39 | case 'both': |
| 40 | values.push( { |
| 41 | id: $file.data( 'id' ), |
| 42 | url: $file.data( 'file' ), |
| 43 | } ); |
| 44 | break; |
| 45 | |
| 46 | default: |
| 47 | values.push( $file.data( 'file' ) ); |
| 48 | break; |
| 49 | } |
| 50 | |
| 51 | } ); |
| 52 | |
| 53 | $valueInput.val( JSON.stringify( values ) ).trigger( 'change.JetFormBuilderMain' ); |
| 54 | |
| 55 | }, |
| 56 | |
| 57 | deleteUpload: function() { |
| 58 | var $this = $( this ), |
| 59 | $file = $this.closest( '.jet-form-builder-file-upload__file' ), |
| 60 | $upload = $this.closest( '.jet-form-builder-file-upload' ), |
| 61 | $value = $upload.find( '.jet-form-builder-file-upload__value' ), |
| 62 | val = $value.val(), |
| 63 | fileURL = $file.data( 'file' ), |
| 64 | fileID = $file.data( 'id' ), |
| 65 | $errors = $upload.find( '.jet-form-builder-file-upload__errors' ), |
| 66 | format = $file.data( 'format' ); |
| 67 | |
| 68 | if ( ! $errors.hasClass( 'is-hidden' ) ) { |
| 69 | $errors.html( '' ).addClass( 'is-hidden' ); |
| 70 | } |
| 71 | |
| 72 | if ( ! val ) { |
| 73 | return; |
| 74 | } |
| 75 | |
| 76 | val = JSON.parse( val ); |
| 77 | |
| 78 | if ( fileID ) { |
| 79 | fileID = parseInt( fileID, 10 ); |
| 80 | } |
| 81 | |
| 82 | if ( val.constructor === Array ) { |
| 83 | |
| 84 | var index = -1; |
| 85 | |
| 86 | switch ( format ) { |
| 87 | |
| 88 | case 'url': |
| 89 | index = val.indexOf( fileURL ); |
| 90 | break; |
| 91 | |
| 92 | case 'id': |
| 93 | |
| 94 | for ( var i = 0; i < val.length; i++ ) { |
| 95 | val[ i ] = parseInt( val[ i ], 10 ); |
| 96 | } |
| 97 | |
| 98 | index = val.indexOf( fileID ); |
| 99 | break; |
| 100 | |
| 101 | case 'both': |
| 102 | |
| 103 | for ( var i = 0; i < val.length; i++ ) { |
| 104 | if ( fileURL === val[ i ].url ) { |
| 105 | index = i; |
| 106 | } |
| 107 | } |
| 108 | |
| 109 | break; |
| 110 | } |
| 111 | |
| 112 | if ( 0 <= index ) { |
| 113 | val.splice( index, 1 ); |
| 114 | } |
| 115 | |
| 116 | if ( ! val[ 0 ] ) { |
| 117 | val = ''; |
| 118 | } |
| 119 | |
| 120 | } else { |
| 121 | val = ''; |
| 122 | } |
| 123 | |
| 124 | if ( val ) { |
| 125 | val = JSON.stringify( val ) |
| 126 | } |
| 127 | |
| 128 | $value.trigger( 'jet-form-builder/on-remove-media-item', [ fileURL, fileID ] ); |
| 129 | |
| 130 | $file.remove(); |
| 131 | $value.val( val ).trigger( 'change.JetFormBuilderMain' ); |
| 132 | |
| 133 | }, |
| 134 | |
| 135 | issetMessage: function( formId, status ) { |
| 136 | if ( ! window.JetFormBuilderFileUploadConfig.errors[ formId ] ) { |
| 137 | return false; |
| 138 | } |
| 139 | |
| 140 | return window.JetFormBuilderFileUploadConfig.errors[ formId ][ status ]; |
| 141 | }, |
| 142 | |
| 143 | getMessage: function( formId, status ) { |
| 144 | const { __ } = wp.i18n; |
| 145 | const unknown = __( 'Unknown error.', 'jet-form-builder' ); |
| 146 | const message = JetFormBuilderFileUpload.issetMessage( formId, status ); |
| 147 | |
| 148 | return message || unknown; |
| 149 | }, |
| 150 | |
| 151 | processUpload: function( event ) { |
| 152 | const self = JetFormBuilderFileUpload; |
| 153 | |
| 154 | var files = event.target.files, |
| 155 | $errors = $( event.target ).closest( '.jet-form-builder-file-upload' ).find( '.jet-form-builder-file-upload__errors' ), |
| 156 | formId = +$( event.target ).closest( 'form' ).data( 'form-id' ); |
| 157 | |
| 158 | $errors.html( '' ).addClass( 'is-hidden' ); |
| 159 | |
| 160 | try { |
| 161 | self.uploadFiles( files, event.target, formId ); |
| 162 | } catch ( error ) { |
| 163 | |
| 164 | if ( self.issetMessage( formId, error ) ) { |
| 165 | $errors.html( self.getMessage( formId, error ) ).removeClass( 'is-hidden' ); |
| 166 | } else { |
| 167 | $errors.html( error ).removeClass( 'is-hidden' ); |
| 168 | } |
| 169 | |
| 170 | event.target.value = ''; |
| 171 | |
| 172 | } |
| 173 | |
| 174 | }, |
| 175 | |
| 176 | lockButtons: function( $upload ) { |
| 177 | |
| 178 | var $form = $upload.closest( 'form.jet-form-builder' ), |
| 179 | $buttons = $form.find( '.jet-form-builder__submit, .jet-form-builder__next-page, .jet-form-builder__prev-page' ); |
| 180 | |
| 181 | $buttons.attr( 'disabled', true ); |
| 182 | |
| 183 | }, |
| 184 | |
| 185 | unlockButtons: function( $upload ) { |
| 186 | |
| 187 | var $form = $upload.closest( 'form.jet-form-builder' ), |
| 188 | $buttons = $form.find( '.jet-form-builder__submit, .jet-form-builder__next-page, .jet-form-builder__prev-page' ); |
| 189 | |
| 190 | $buttons.attr( 'disabled', false ); |
| 191 | |
| 192 | }, |
| 193 | |
| 194 | uploadFiles: function( files, input, formId ) { |
| 195 | const self = JetFormBuilderFileUpload; |
| 196 | |
| 197 | if ( ! files.length ) { |
| 198 | return; |
| 199 | } |
| 200 | |
| 201 | var file, formData, formID, field, xhr, limit, allowedTypes, maxSize; |
| 202 | var $input = $( input ), |
| 203 | $upload = $input.closest( '.jet-form-builder-file-upload' ), |
| 204 | $valueInput = $upload.find( '.jet-form-builder-file-upload__value' ), |
| 205 | $errors = $upload.find( '.jet-form-builder-file-upload__errors' ), |
| 206 | currentVal = $valueInput.val(); |
| 207 | |
| 208 | limit = input.dataset.max_files || 1; |
| 209 | limit = parseInt( limit, 10 ); |
| 210 | |
| 211 | allowedTypes = input.dataset.allowed_types || false; |
| 212 | formID = input.dataset.form_id || false; |
| 213 | field = input.dataset.field || false; |
| 214 | maxSize = input.dataset.max_size || window.JetFormBuilderFileUploadConfig.max_upload_size; |
| 215 | maxSize = parseInt( maxSize, 10 ); |
| 216 | |
| 217 | if ( currentVal && '' !== currentVal ) { |
| 218 | currentVal = JSON.parse( currentVal ); |
| 219 | |
| 220 | if ( Array.isArray( currentVal ) && currentVal.length && limit < ( files.length + currentVal.length ) ) { |
| 221 | throw 'upload_max_files'; |
| 222 | } |
| 223 | |
| 224 | } |
| 225 | |
| 226 | if ( limit < files.length ) { |
| 227 | throw 'upload_max_files'; |
| 228 | } |
| 229 | |
| 230 | formData = new FormData(); |
| 231 | |
| 232 | formData.append( 'action', window.JetFormBuilderFileUploadConfig.action ); |
| 233 | formData.append( 'nonce', window.JetFormBuilderFileUploadConfig.nonce ); |
| 234 | formData.append( 'form_id', formID ); |
| 235 | formData.append( 'field', field ); |
| 236 | |
| 237 | for ( var i = 0; i < files.length; i++ ) { |
| 238 | |
| 239 | file = files.item( i ); |
| 240 | |
| 241 | if ( allowedTypes && 0 > allowedTypes.indexOf( file.type ) ) { |
| 242 | throw 'upload_mime_types'; |
| 243 | } |
| 244 | |
| 245 | if ( file[ 'size' ] > maxSize ) { |
| 246 | throw 'upload_mime_types'; |
| 247 | } |
| 248 | |
| 249 | formData.append( 'file_' + i, file ); |
| 250 | |
| 251 | } |
| 252 | |
| 253 | xhr = new XMLHttpRequest(); |
| 254 | |
| 255 | $upload.addClass( 'is-loading' ); |
| 256 | JetFormBuilderFileUpload.lockButtons( $upload ); |
| 257 | |
| 258 | xhr.open( 'POST', window.JetFormBuilderFileUploadConfig.ajaxurl, true ); |
| 259 | |
| 260 | xhr.onload = function( e, r ) { |
| 261 | |
| 262 | $upload.removeClass( 'is-loading' ); |
| 263 | JetFormBuilderFileUpload.unlockButtons( $upload ); |
| 264 | |
| 265 | if ( xhr.status === 200 ) { |
| 266 | var response = e.currentTarget.response; |
| 267 | |
| 268 | try { |
| 269 | response = JSON.parse( response ); |
| 270 | } catch ( e ) { |
| 271 | $errors.html( self.getMessage( formId, 'internal_error' ) ).removeClass( 'is-hidden' ); |
| 272 | return false; |
| 273 | } |
| 274 | |
| 275 | if ( ! response.success ) { |
| 276 | $errors.html( response.data ).removeClass( 'is-hidden' ); |
| 277 | return; |
| 278 | } else { |
| 279 | JetFormBuilderFileUpload.updateResults( $upload, response.data ); |
| 280 | if ( response.data.errors ) { |
| 281 | $errors.html( response.data.errors ).removeClass( 'is-hidden' ); |
| 282 | } else { |
| 283 | $errors.html( '' ).addClass( 'is-hidden' ); |
| 284 | } |
| 285 | } |
| 286 | |
| 287 | } else { |
| 288 | $errors.html( xhr.status ).removeClass( 'is-hidden' ); |
| 289 | } |
| 290 | |
| 291 | }; |
| 292 | |
| 293 | xhr.send( formData ); |
| 294 | |
| 295 | input.value = ''; |
| 296 | |
| 297 | }, |
| 298 | |
| 299 | updateResults: function( $upload, responseData ) { |
| 300 | |
| 301 | var $filesContainer = $upload.find( '.jet-form-builder-file-upload__files' ), |
| 302 | $input = $upload.find( '.jet-form-builder-file-upload__value' ), |
| 303 | args = $filesContainer.data( 'args' ), |
| 304 | values = [], |
| 305 | inputValues = false, |
| 306 | limit = args.max_files || 1; |
| 307 | |
| 308 | limit = parseInt( limit, 10 ); |
| 309 | |
| 310 | const oldInputVal = $input.val(); |
| 311 | |
| 312 | if ( 1 === limit ) { |
| 313 | $filesContainer.html( responseData.html ); |
| 314 | $input.val( JSON.stringify( responseData.value ) ).trigger( 'change.JetFormBuilderMain' ); |
| 315 | } else { |
| 316 | |
| 317 | inputValues = $input.val(); |
| 318 | |
| 319 | if ( inputValues ) { |
| 320 | values = JSON.parse( inputValues ); |
| 321 | if ( ! values ) { |
| 322 | values = []; |
| 323 | } |
| 324 | } |
| 325 | |
| 326 | for ( var i = 0; i < responseData.value.length; i++ ) { |
| 327 | values.push( responseData.value[ i ] ); |
| 328 | } |
| 329 | |
| 330 | $input.val( JSON.stringify( values ) ); |
| 331 | |
| 332 | if ( inputValues ) { |
| 333 | $input.trigger( 'change.JetFormBuilderMain', [ JSON.parse( inputValues ) ] ); |
| 334 | } |
| 335 | |
| 336 | $filesContainer.append( responseData.html ); |
| 337 | $filesContainer.sortable( 'destroy' ); |
| 338 | |
| 339 | $filesContainer.sortable( { |
| 340 | items: '.jet-form-builder-file-upload__file', |
| 341 | forcePlaceholderSize: true, |
| 342 | } ).bind( 'sortupdate', JetFormBuilderFileUpload.onSortCallback ); |
| 343 | } |
| 344 | |
| 345 | $input.trigger( 'jet-form-builder/on-upload-media', [ responseData.value, |
| 346 | JSON.parse( oldInputVal || '{}' ) ] ) |
| 347 | }, |
| 348 | |
| 349 | }; |
| 350 | |
| 351 | $( JetFormBuilderFileUpload.init() ); |
| 352 | |
| 353 | }( jQuery ) ); |