Level 27
What errors are you getting in your browser?
Oct 15, 2020
9
Level 5
Dropzone js is not working
HI all, I can drag images, and remove them too, however, the photos are not saved in my public directory, i would really appreciate your support ! Thanks
=the form
<form method="post" action="{{url('upload/store')}}" enctype="multipart/form-data"
class="dropzone" id="dropzone">
@csrf
</form>
=Js
<script type="text/javascript">
Dropzone.options.dropzone =
{
maxFilesize: 12,
renameFile: function(file) {
var dt = new Date();
var time = dt.getTime();
return time+file.name;
},
acceptedFiles: ".jpeg,.jpg,.png,.gif",
addRemoveLinks: true,
timeout: 50000,
removedfile: function(file)
{
var name = file.upload.filename;
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
},
type: 'POST',
url: '{{ url("delete") }}',
data: {filename: name},
success: function (data){
console.log("File has been successfully removed!!");
},
error: function(e) {
console.log(e);
}});
var fileRef;
return (fileRef = file.previewElement) != null ?
fileRef.parentNode.removeChild(file.previewElement) : void 0;
},
success: function(file, response)
{
console.log(response);
},
error: function(file, response)
{
return false;
}
};
</script>
public function stores(Request $request)
{
// return $request;
$image = $request->file('file');
$imageName = $image->getClientOriginalName();
$image->move(public_path('products'), $imageName);;
//$sav = savePhoto('products', $imageName);
return response()->json(['success'=> $imageName]);
}
=the route
Route::post('upload/store', 'ImageUploadController@stores');
Route::post('delete', 'ImageUploadController@delete')->name('delete');
Level 5
Hey @laracoft , thanks for your support !
I have error in console,
dashboard-crypto.js:18 Uncaught TypeError: Cannot read property 'getContext' of null
at dashboard-crypto.js:18
at dashboard-crypto.js:221
(anonymous) @ dashboard-crypto.js:18
(anonymous) @ dashboard-crypto.js:221
checkbox-radio.js:74 Uncaught TypeError: $(...).iCheck is not a function
at checkbox-radio.js:74
at checkbox-radio.js:103
(anonymous) @ checkbox-radio.js:74
(anonymous) @ checkbox-radio.js:103
1:2058 Uncaught TypeError: $(...).timeDropper is not a function
at 1:2058
(anonymous) @ 1:2058
datatable-basic.js:17 Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument.<anonymous> (datatable-basic.js:17)
at fire (jquery.js:1037)
at Object.fireWith [as resolveWith] (jquery.js:1148)
at Function.ready (jquery.js:433)
at HTMLDocument.completed (jquery.js:103)
(anonymous) @ datatable-basic.js:17
fire @ jquery.js:1037
fireWith @ jquery.js:1148
ready @ jquery.js:433
completed @ jquery.js:103
dropzone.js:2777 POST http://localhost:8000/upload/store 404 (Not Found)
submitRequest @ dropzone.js:2777
_uploadData @ dropzone.js:2501
(anonymous) @ dropzone.js:2365
(anonymous) @ dropzone.js:2519
transformFile @ dropzone.js:675
_loop @ dropzone.js:2516
_transformFiles @ dropzone.js:2525
uploadFiles @ dropzone.js:2279
processFiles @ dropzone.js:2184
processFile @ dropzone.js:2152
processQueue @ dropzone.js:2141
(anonymous) @ dropzone.js:1878
setTimeout (async)
enqueueFile @ dropzone.js:1877
(anonymous) @ dropzone.js:1839
accept @ dropzone.js:530
accept @ dropzone.js:1805
addFile @ dropzone.js:1832
(anonymous) @ dropzone.js:1244
jquery.js:8526 POST http://localhost:8000/delete 404 (Not Found)
```
Level 5
the error changed to 500 after changing js files's positions
dropzone.js:2777 POST http://localhost:8000/en/admin/products/upload/store 500 (Internal Server Error)
submitRequest @ dropzone.js:2777
_uploadData @ dropzone.js:2501
(anonymous) @ dropzone.js:2365
(anonymous) @ dropzone.js:2519
transformFile @ dropzone.js:675
_loop @ dropzone.js:2516
_transformFiles @ dropzone.js:2525
uploadFiles @ dropzone.js:2279
processFiles @ dropzone.js:2184
processFile @ dropzone.js:2152
processQueue @ dropzone.js:2141
(anonymous) @ dropzone.js:1878
setTimeout (async)
enqueueFile @ dropzone.js:1877
(anonymous) @ dropzone.js:1839
accept @ dropzone.js:530
accept @ dropzone.js:1805
addFile @ dropzone.js:1832
(anonymous) @ dropzone.js:1244
Level 102
Use f12 and network tab to the see the error
Level 5
Hi @sinnbeck , thanks for your support ! i checked the Network tab under headers and found these infos,
=In Response Headers
HTTP/1.0 500 Internal Server Error
Host: localhost:8000
Date: Thu, 15 Oct 2020 13:15:07 GMT
Connection: close
X-Powered-By: PHP/7.4.5
Cache-Control: no-cache, private
Date: Thu, 15 Oct 2020 13:15:07 GMT
Content-Type: application/json
= in Request Headers
Accept: application/json
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 53770
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryofRYmtCBjEJm3v2k
Cookie: __atuvc=24%7C39%2C1%7C40; XSRF-TOKEN=eyJpdiI6IlE5c2xpREhiWEMyUHJMRWp3UzZVMHc9PSIsInZhbHVlIjoiK0dFOGhXVFJNaVFLRlAyaWRvOHVOWFl4QkhWYzFJTllBTW10YjJOYXI4ZittSWtVRFMwWUY1NGdDbXI2UGFFcWF6eUlXdGNXbWZwMzZaWXhBQWNZcnovSWJKUkdqNDVWWWRiNWFKc3hncjFVbDdYZ1VBMXpmZ0dPMXNhMHhsQW0iLCJtYWMiOiI0ZWZiY2JiNWY1NDA0YTE3OGQyZjk3ZDViYmRjYjZkOWE2NWRjYjgwMTNkOWJkMzE4NjFkOTNkMzMyM2IzOTEzIn0%3D; laravel_session=eyJpdiI6IjQzUHBSRll0VGcvM0NCWkcwcU1UU0E9PSIsInZhbHVlIjoiLytKZlA1cW83UG1SNzcvaFpMbHVsY3UyYldzWDRFaW8yV3pDaVJLcFZWWUllU1JyK3BXb0xDeEJJVC9Bbzh2WWcvZng0enhJNzRTcWMzdXZSbzg0UUpDNjFFMkUwTGZzUSszNVJpMFRtZzJRM09EWG1LRVRuZlB6Wk1PWGFNYSsiLCJtYWMiOiIxZmYxOTgxYWY4OWJmMWUyZGMzMThjNWQyNDBmOWM2N2FhYWY2NmFiZDg3MjVkODI5YmY3NmEwZmZmNTg5NGViIn0%3D
Host: localhost:8000
Origin: http://localhost:8000
Referer: http://localhost:8000/ar/admin/products/images/1
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4128.0 Safari/537.36
X-Requested-With: XMLHttpRequest
= Form Data
------WebKitFormBoundaryofRYmtCBjEJm3v2k
Content-Disposition: form-data; name="_token"
b4DwJaPLDdjOomNNqe8gsKBmWptyhaxJnEtxqo14
------WebKitFormBoundaryofRYmtCBjEJm3v2k
Content-Disposition: form-data; name="file"; filename="1602767706802babay1b.png"
Content-Type: image/png
------WebKitFormBoundaryofRYmtCBjEJm3v2k--
It seems that is image is sent successfully included,
Level 102
The response tab in there should show you the actual error
Level 5
I guess the photo is not sent to the controller, i found this in Previews under Network tab
{message: "Call to a member function getClientOriginalName() on null", exception: "Error",…}
exception: "Error"
file: "C:\xampp\htdocs\LaravelComplete\Ecoms\ecom\app\Http\Controllers\Dashboard\ProductController.php"
line: 131
message: "Call to a member function getClientOriginalName() on null"
trace: [{function: "stores", class: "App\Http\Controllers\Dashboard\ProductController", type: "->"}, {,…},…]
Level 5
Thanks a lot @sinnbeck , the problem is solved,
The controller was getting the wrong file name, after that i had to increase the size of
upload_max_filesize to 500M in php.in file.
Level 102
Good to hear
1 like
Please or to participate in this conversation.