You need some kind of library for this to make this work. This is not something Javascript supports out of the box. Here is a useful tutorial: http://www.onlinecode.org/php-laravel-file-upload-with-progress-bar-example/
Oct 10, 2020
9
Level 1
Get the ftp upload percentages with Laravel FileSystem
Hello guys, so i have an app like wetransfer.com, so i'm trying to get the upload percentage from the ftp.
Here is my upload controller.
public function upload(UploadRequest $request)
{
/*
* If user have registration, make his own folder with name of his email address
*/
$folder = !Auth::user() ? md5(Str::random(10) . $request->ip() . time()) : Auth::user()->email;
// Get all of the files
$files = $request->file('cloudesk_upload');
// Generate Short url
$shortUrl = env("SHORT_URL") . "/" . Str::random(5);
/*
* Generate a new short link
*/
$link = new Link();
$link->url = $shortUrl;
$link->save();
/*
* Data insert
*/
$data = [];
foreach ($files as $file) {
$filename = md5($file->hashName());
$data[] = [
"original_name" => $file->getClientOriginalName(),
"unique_name" => $filename,
"last_modified" => time(),
"server_path" => env("UPLOAD_MAIN_DIR") . "$folder/$filename",
"size" => $file->getSize(),
"extension" => $file->getClientOriginalExtension(),
"in_dir" => $folder,
"link_id" => $link->id,
"delete_at" => Carbon::now()->addWeek(1),
"user_id" => Auth::user() ? Auth::user()->id : null
];
Storage::disk('fu_ftp')->put("home/" . "$folder", $file);
}
File::insert($data);
return response()->json([
"success" => "file was uploaded successfully",
"file" => $data,
"url" => $link->url
], 200);
}
And my front end side:
const onDrop = useCallback(acceptedFiles => {
setShowUpload(false);
const uploading = acceptedFiles.map(file => {
console.log(file);
const formData = new FormData();
formData.append("cloudesk_upload[]", file);
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = event => {
const percentage = parseInt((event.loaded / event.total) * 100);
setUploadPercentages(percentage);
};
xhr.onreadystatechange = () => {
if (xhr.readyState !== 4) return;
if (xhr.status !== 200) {
console.log('error'); // Handle error here
}
console.log('success'); // Handle success here
};
setTimeout(() => {
xhr.open('POST', `${window.API_URL}/upload`, true);
xhr.send(formData);
}, 3000)
});
}, [])
It's work but just show the percentage of how many form data is sended to the backend.
How to get how many of that file are uploaded to the ftp. Thank u in advice :)
Level 80
@stank0v01 You need to upload the file in parts. You shouldn’t be trying to upload a 3 GB file all in one go. Look into chunked/multi-part uploading.
Please or to participate in this conversation.