Ajax upload files / Progress bar

Posted 1 year ago by iNemesis247

Hello. I want to create a nice upload UI and i need help. So far i use ajax for uploading and my code is :

app.js

var form = document.getElementById('upload');
var request = new XMLHttpRequest();

form.addEventListener('submit', function (e) {
    e.preventDefault();
    var formdata = new FormData(form);
    request.open('post', '/upload');
    request.addEventListener("load", transferCompleted);
    request.send(formdata);
});

function transferCompleted(data){
    console.log('Upload Completed');
}

UploadRequest.php (Where i check mimes etc)

// Rules method
public function rules()
    {
       // Check mimes
        return $rules;
    }
}

and finally UploadFilesController.php

...
// Routed method uploadSubmit
public function uploadSubmit(UploadRequest $request)
{
    // Store Files
    return view('thisview', $aMessage);
}

All i want now is to set a simple progress bar to proceed further building a nice UI. Any suggestions on how you do this ?

Thanks.

Please sign in or create an account to participate in this conversation.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.