Il file JavaScript
Contiene la logica front-end della nostra applicazione: l’ho inserito in public/js/app.js :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
$(function(){ 'use strict'; // set the csrf-token for all AJAX requests $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); // fileupload() related actions if ($().fileupload) { // Initialize the jQuery File Upload widget: $('#fileupload').fileupload({ // Uncomment the following to send cross-domain cookies: //xhrFields: {withCredentials: true}, url: $('#fileupload').attr('action'), // Enable image resizing, except for Android and Opera, // which actually support image resizing, but fail to // send Blob objects via XHR requests: disableImageResize: /Android(?!.*Chrome)|Opera/ .test(window.navigator.userAgent), maxFileSize: 2000000, acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i }); // Enable iframe cross-domain access via redirect option: $('#fileupload').fileupload( 'option', 'redirect', window.location.href.replace( /\/[^\/]*$/, '/cors/result.html?%s' ) ); // Load existing files: $('#fileupload').addClass('fileupload-processing'); $.ajax({ // Uncomment the following to send cross-domain cookies: //xhrFields: {withCredentials: true}, url: $('#fileupload').fileupload('option', 'url'), dataType: 'json', context: $('#fileupload')[0] }).always(function () { $(this).removeClass('fileupload-processing'); }).done(function (result) { $(this).fileupload('option', 'done') .call(this, $.Event('done'), {result: result}); }); } }); |
Ci sono alcune cose che ho modificato dal codice originario:
- Le righe 5-9 fanno sì che il Token per evitare attacchi CSRF venga inviato automaticamente con ogni richiesta AJAX
- Alla riga 18, il parametro url è inizializzato con l' action del form definita precedentemente nel codice HTML
Il front-end è così completo.