Upload File via AJAX

Vue is browser side, you could use vue but call a regular laravel /PHP controller method for the actual upload.
Edit did you miss https://laracasts.com/discuss/channels/general-discussion/how-to-deal-with-upload-input-with-vuejs/?page=1

Of course I know that. I need to know how to send the file input information through Vue to the controller.

If I send the file input with a file on it (without procesing anything) it sends: C:\fakepath\1.png.

Any clues?

Hi @pdellepiane ,
You need to use FormData to post file through AJAX, here is a snippet of my codes. I am assuming that you already linked up vue and vue-resource.

//HTML
<div class="form-group">
    <input id="fileUploadFile" type="file" @change="bindFile" class="form-control">
</div>

//vue - i will just highlight what that is important 
data:{
    fileUploadFormData:new FormData(),
}

//bindFile function
module.exports = function (e) { 
    e.preventDefault();
    this.fileUploadFormData.append('file', e.target.files[0]);
};

//Upload function - trigger when you submit the form
module.exports = function (e) { 
    e.preventDefault();
    if(this.fileUploadData.file==undefined)this.fileUploadFormData.append('file', '');
    
    this.$http.post('/uploadDocument', this.fileUploadFormData, function(data){
        //code your logic here
    }).error(function (data, status, request) {
        //error handling here
    });
};

Hope this is helpful for you. Enjoy Coding!

@ralee It worked with your code! Thanks a lot!

But now I have a new problem. I made an API for smartphones/tablets/website of my proyect, so that I consume the services from any device. The problem is that I would like to have 1 service for all the devices, in this case (for example) add a new contact.

If I add the new contact from the web using the API, I will send the picture of that contact by FormData, but, if I use the service from an Android device, it sends the picture of the contact on base64. Is there a way to handle it on the same way?

Thanks in advance!

@pdellepiane I recently came across the same issue but I required the ability to support older browsers. I found a really nice jQuery plugin which handles this and supports a surprisingly large number of browsers. https://github.com/blueimp/jQuery-File-Upload

I do not have an answer to your second issue though, maybe create a new topic for that or take a look around Stack Overflow?

@pdellepiane ,
I am afraid i dont have the knowledge on that. I agree with @craigchilds94. You should create a new topic with a title more relevant to the 2nd issue. That would probably attract people with the experience to better help you.

Enjoy coding!

The simplest way would be with Dropzone: http://www.dropzonejs.com/

Just catch the input file and your are done.

Example View:

<form action="/route/to/store" method="POST"
      class="dropzone"
      id="my-awesome-dropzone">
     {{ csrf_field() }}
</form>

Controller

    public function storePicture(Request $request)
    {

        /*
        * Validate the request
        */
        $this->validate($request, [
            'file'  => 'image|max:3000',
        ]);

        /*
         * Get the image name and store the image in users 
         * folder on the server
         */
        $destinationPath = public_path() . '/uploads/user_id_'. $request->user()->id;
        $filename = $request->file('file')->getClientOriginalName();

        /*
         * Store the image in the $destinationPath
         */
        $upload_success = $request->file('file')->move($destinationPath, $filename);

        /*
         * die and dump
         */
        dd($upload_success);
    }

I am using vuejs version1.012.

The html has file input

<input type="file" id="fileInput" v-el:fileInput />

on the Js file

var formData = new FormData();

formData.append('file', this.$els.fileinput.files[0]);

I found out that the element was changed to lower case and I was dealing with undefined error.

I hope this help you all. if does so Like it. ; )

Alright, I had this issue before and since I always like to go one step further, I wanted to be able to upload and manage multiple files via Ajax using VueJs and Laravel. After some time I decided to write an article on how to do it. I believe it will help a lot for all of those that struggle.

https://medium.com/@adnanxteam/how-to-upload-multiple-files-via-ajax-vuejs-and-laravel-5-5-file-management-d218c3bbb71c