CODEWITHSUNDEEP
javascriptphpajaxbackbone.jslaravel
Mithran
Mithran

Reputation: 311

How to Upload multiple files after form submit using backbone.js save() method?

I am using backbone as java script framework. I have a form, I want to upload upto 10 images at the same time. I am also giving enctype="multipart/form-data" in form tag and using 

<form id="myform" enctype="multipart/form-data" method="post">
   <input type="file" name="file1"/>
   <input type="file" name="file2"/>
</form>

On file change, I am using using HTML5 FileReader() to read the file. And then when i submit the form i want to save all the formdatas. And I have to upload these images to 'uploads/images' directory. As I mentioned, I am using backbone, so when my form submits, I prevent the page reloading using e.preventDefault(). After that,

     var savemyForm = Backbone.View.extend(){
     id: '#form_id",
     events: {
             'submit' : 'save'
     }
     save : function (e){
             e.preventDefault();
             var newproject = new App.Models.Project;
              newproject.save({

               // I have to pass values here. But how can i pass values of files. 
               // And that files where I am passing from here should be 
               // moveable to my '/uploads/directory' using the 
               // move_upload_file($destination_path, $filename);
             });     
   });

Upvotes: 1

Views: 930

Answers (1)

sidneydobber
sidneydobber

Reputation: 2910

You should be able to just send AJAX post with your files from a multipart form to your serverside script that handles the file writing! It's a smart thing to use the jQuery.forms plugin so your fileuploads are IE compatible too.

Then post your form to a route and process it with a Laravel serverside script like this:

public function create() {
   $file = Input::file('file');
   $file_upload = new FileUpload;
   $file_upload->name = Input::get('name');
   $file_upload->path = $this->settings['destination_folder'];
   $file_upload->extension = $file->getClientOriginalExtension();
   $file_upload->mimetype = $file->getMimeType();
   $file_upload->file_size = $file->getSize();
   if (exif_imagetype($file)) {
      list($width, $height) = getimagesize($file);
      $file_upload->dimensions = $width . " x " . $height;
   }
   $file_upload->save();
   $file->move($this->settings['destination_folder'], $file_upload->name);
}

This is a snippit of the code I use to write files in Laravel. In your case you would have to create some for loop for adding multiple files.

Some info on how to setup and use RESTful controllers in Laravel:

I would advise you to first try to upload one file successfully and if that works out try multiple. From one to multiple is not rocket science. ;)

Upvotes: 1

Related Questions