Ajax upload files / Progress bar

Published 8 months 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.

Best Answer (As Selected By iNemesis247)
Dry7
Dry7
Dry7
8 months ago (151,680 XP)
iNemesis247

@Dry7 Thank you. Really appreciated it.

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