Laravel & Dropzone file delete not working - php

I want to delete files from server which have been uploaded through Dropzone.But,Only thumbnails have been deleted.File in the server not erased.I have got an error in console.http://localhost:8000/upload/delete 500 (Internal Server Error)'
My Upload Method In Controller
public function upload(Request $request){
$file= $request->file('file');
$filename=$file->getClientOriginalName();
$upload='uploads/topics';
$file->move($upload, $filename);
}
Dropzone Script file.
Dropzone.options.addImages = {
maxFilesize: 8,
addRemoveLinks: true,
dictRemoveFile: 'Remove',
init:function() {
this.on("removedfile", function(file) {
$.ajax({
type: 'POST',
url: 'upload/delete',
data: {id: file.name},
dataType: 'html',
success: function(data){
var rep = JSON.parse(data);
}
});
} );
},
}
My delete method in controller.
public function delete(Request $request){
$filename = $request->input('id');
unlink('uploads/topics'.$filename);
}

Two issues that I can see right away:
In your delete controller method you are trying to access $request but you haven't injected it.
The request input method is lowercase.
I believe this is closer to what you need:
public function delete(Request $request){
$filename = $request->input('id');
unlink('uploads/topics/' . $filename);
}
Some notes:
Whenever you get an "internal server error" that means you need to check your error logs. There are details in one of your log files that will tell you the exact error.
Right now your delete method could allow a user to delete things you may not want them to delete. I could easily post a filename to that endpoint and delete anything from your topics folder.
Even more dangerous, this code appears to be at risk for a traversal attack. See here for details: https://www.owasp.org/index.php/Path_Traversal

Related

Using twig attributes like asset not working in jQuery with placeholder values

I am trying to change the picture when I submit ajax on success through changing the src of the img tag. I get this error though:
GET http://localhost:8000/%7B%7B%20asset('/uploads/images/$%7Bdata.picSource%7D')%7D%7D 404 (Not Found)
I also get errors in creating new buttons with jQuery that has twig path in their href atrributes. I have read the articles about putting the twig part in such quotes:"", but I use these: `` and inside of them "" in order to put variables freely in the path to make it dynamic.
This is my ajax query:
$(".uploadPic").on('submit', function(event){
event.preventDefault();
event.stopPropagation();
$.ajax({
type: "post",
url: "/upload",
data: new FormData($(".uploadPic")[0]),
processData: false,
contentType: false,
success: function (data) {
let newSource = `"{{ asset('/uploads/images/${data.picSource}')}}"`;
$("#userPic").attr('src', newSource);
},
error: function (response) {
console.log(response);
}
});
});
The response in the network tab is normal(the name and extension of the picture): {"picSource":"8bcfb2d2a1117cbb452f632829a5cad8.jpeg"}, but I get error from passing the new attribute.
The part from the controller on successfull ajax request:
if(isset($request->request)) {
$file = $request->files->get('user_pic_type')['userPic'];
$file = $user->getUserPic();
$fileName = $this->generateUniqueFileName() . '.' . $file->guessExtension();
$file->move(
$this->getParameter('users_directory'),
$fileName
);
$user->setUserPic($fileName);
$em = $this->getDoctrine()->getManager();
$em->persist($user);
$em->flush();
return new JsonResponse(array('picSource' => $fileName));
}
What I can do to correct this problem ?
You've mixed up JS (which runs in your browser) and PHP (which runs on your server and transmits rendered HTML to the browser). If you want to generate such an asset rule in the frontend, you should either fire an AJAX call for it or generate the URL by hand.
But as you already use an AJAX call, you should use it to return the image path for you. Add some code like this to your PHP controller:
/** #var \Symfony\Component\Asset\Packages $manager */
$manager = $this->get('assets.packages');
$imagePath = $manager->getUrl('/uploads/images/' . $fileName);
return new JsonResponse(array('picSource' => $fileName, 'imagePath' => $imagePath));
Now, the backend already generates all neccessary data for you and sends it to the browser

Call to a member function getClientOriginalName() on null

I can upload my file using to amazon s3 bucket successfully using my api and i can get a response:
But when i integrate this api into my application it says Call to a member function getClientOriginalName() on null i dont know where i am doing wrong:
My Api method:
public function uploadToAws(Request $request) {
$file = $request->file('image');
$imageName = 'company_logo/' . $file->getClientOriginalName();
Storage::disk('s3')->put($imageName, file_get_contents($file));
Storage::disk('s3')->setVisibility($imageName, 'public');
$url = Storage::disk('s3')->url($imageName);
$resultArray = ['status' => 1, 'message' => 'File uploaded to s3 bucket!', 'dataArray' => $url];
return Response::json($resultArray, 200);
}
and my response of this api:
{
"status": 1,
"message": "File uploaded to s3 bucket!",
"dataArray": "https://spikessales.s3.amazonaws.com/company_logo/template3.jpg"
}
I can perfectly upload file to s3 bucket using this api:
But when i integrate to my application view it says Call to a member function getClientOriginalName() on null i dont where i am wrong:
This view code using ajax call:
///upload logo sec
$(document).on('click', '.browse', function () {
var file = $(this).parent().parent().parent().find('.changefle');
file.trigger('click');
});
$(document).on('change', '.changefle', function () {
var imagename = "";
$.each($(".changefle")[0].files, function (i, file) {
imagename = file.name;
});
$.ajax({//Process the form using $.ajax()
type: 'post', //Method type
url: 'http://127.0.0.1:8000/api/upload_aws', //Your form processing file
URL
data: {
image: imagename
}, //Forms name
dataType: 'json',
success: function (data) {
console.log(data);
// localStorage.setItem("set-compylogo", companylogo);
},
error: function (data) {
console.log("error");
}
Your help will be highly appreciated!
It might be your ajax need more headers to upload file. or may be it need this:
$.ajax({
headers: {
'X-CSRF-TOKEN': your_crsf_token,
'Content-type: text/html;charset=ISO-8859-1'
},
...
});
For further information, you might want to check this out: AJAX File Upload with XMLHttpRequest
You are sending a string (image name) instead of a FILE object. To use those methods laravel needs a file object. So imagename = file; instead of imagename = file.name

Laravel SparkForm file upload error

I'm working on a Laravel Spark project and I am trying to get a form to upload a folder to my S3 bucket. I have the form built:
<form enctype="multipart/form-data">
<input type="file" name="resume" v-model="form.resume">
<button #click="updateProfile">Update Profile</button>
</form>
Then I have a vue component set up to handle the form submit:
Vue.component('resume-links', {
template: '#edit-resume-links',
data() {
return {
form: new SparkForm({
resume: ''
})
};
},
methods: {
updateProfile() {
console.log(this.form.resume);
Spark.post('/route/to/controller', this.form).then(response => {
console.log(response);
});
}
}
});
Then in my laravel controller:
$resume = $request->file('resume');
$resumeFileName = time() . '.' . $resume->getClientOriginalExtension();
$s3 = \Storage::disk('s3');
$filePath = '/resumes/' . $resumeFileName;
$s3->put($filePath, file_get_contents($resume), 'public');
When I try to submit the form with a file it throws this error:
Call to a member function getClientOriginalExtension() on null
I have tried var_dumping $resume right after setting it to the file() and what I see outputted to the console is a bunch of js looking code
From everything that I reading it looks like file uploads with Laravel is super easy and I don't know why I am having this issue. Any assistance/advice would be appreciated! Thanks!
First of all, your file input needs to have the v-el attribute rather than v-model.
In your case it would be <input type="file" name="form" v-el:resume />.
Next, in your Vue component, you need to gather the FormData so that it becomes possible to send the file to the server. Files have to be handled slightly differently to plain text fields and such.
Add this to your methods object:
gatherFormData() {
const data = new FormData();
data.append('resume', this.$els.resume.files[0]);
return data;
}
In your updateProfile method you now need to send this data off to the server as a POST request.
updateProfile(e) {
e.preventDefault();
var self = this;
this.form.startProcessing();
$.ajax({
url: '/route/to/controller',
data: this.gatherFormData(),
cache: false,
contentType: false,
processData: false,
type: 'POST',
headers: {
'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN')
},
success: function (response) {
self.form.finishProcessing();
console.log(response)
},
error: function (error) {
self.form.setErrors(error.responseJSON);
}
});
},
Finally, in your controller method, you can now handle the file as normal
(e.g., $request->file('resume');)
Handling files with Laravel really is a breeze – you just need to make sure you're actually getting them to the server ;)

Laravel 5.2 Ajax internal server error 500

I'm using Laravel 5.2 with ajax but I have internal server error 500 when I click on the link for example.
Here my code . . .
Blade file:
<a class="delete" href="#" data-userid="{{ $user->id }}">X</a>
Js file:
var userId = 0;
$('.delete').on('click', function(event){
event.preventDefault();
userId = event.target.dataset['userid'];
$.ajax({
method:'POST',
url: 'users/delete',
data: {userId: userId, _token: token}
}).done(function() {
console.log('done');
});
console.log(userId);
});
Route file:
Route::post('users/delete', 'HomeController#delete');
HomeController file:
public function delete(Request $request)
{
$user = POST::find($request['userId']);
$user->delete();
return response();
}
Js file works good out of laravel . . .
Of course I have database with users table, and connection with database.
I'm working locally and using windows 10.
This is error screenshot:
Can you please try using request Method as DELETE rather than a POST ?
It may fix your error. Here. Below check example for delete.
http://www.sitepoint.com/crud-create-read-update-delete-laravel-app/
[2016-04-30 21:35:42] local.ERROR: exception 'Symfony\Component\Debug\Exception\FatalErrorException' with message 'Class 'App\Http\Controllers\POST' not found' in C:\project-user\app\Http\Controllers\HomeController.php:47
looks like you didn't imported POST with use keyword or you used wrong class (not POST)
use this
(check if POST is the right name for ur model in App folder)
$user = \POST::findOrfail($request->input('userId');
$user->delete();
return response()->json('Success');
in js
success: function(response){
console.log(response);
}

dropzone not uploading, 400 bad request, token_not_provided

okay i've been trying this for like 2 hrs now and cant to make this work. dropzone cant upload any file. the server says "token not provided". im using laravel as backend and it uses jwt tokens for authentication and angular as front end. here's my dropzone config.
$scope.dropzoneConfig = {
options: { // passed into the Dropzone constructor
url: 'http://localhost:8000/api/attachments'
paramName: 'file'
},
eventHandlers: {
sending: function (file, xhr, formData) {
formData.append('token', TokenHandler.getToken());
console.log('sending');
},
success: function (file, response) {
console.log(response);
},
error: function(response) {
console.log(response);
}
}
};
and the route definition
Route::group(array('prefix' => 'api', 'middleware' => 'jwt.auth'), function() {
Route::resource('attachments', 'AttachmentController', ['only' => 'store']);
}));
and the controller method
/**
* Store a newly created resource in storage.
*
* #return Response
*/
public function store(Request $request)
{
$file = Input::file('file');
return 'okay'; // just until it works
}
the token is correct and is actually getting to the server (because i tried returning the token using Input::get('token') in another controller function and it works). can someone tell me what im doing wrong? im getting "400 Bad Request" with "token_not_provided" message...
thanks for any help. and i apologize for my bad english..
I'm not sure why appending the token to the form isn't working, but you could try sending it in the authorization header instead.
Replace
formData.append('token', TokenHandler.getToken());
With
xhr.setRequestHeader('Authorization', 'Bearer: ' + TokenHandler.getToken());
make sure you add the token to your call: Example you can add the toke as a parameter in your dropzone url parameter.
//If you are using satellizer you can you this
var token = $auth.getToken();// remember to inject $auth
$scope.dropzoneConfig = {
options: { // passed into the Dropzone constructor
url: 'http://localhost:8000/api/attachments?token=token'
paramName: 'file'
},
eventHandlers: {
sending: function (file, xhr, formData) {
formData.append('token', TokenHandler.getToken());
console.log('sending');
},
success: function (file, response) {
console.log(response);
},
error: function(response) {
console.log(response);
}
}
};

Categories