Trying to use the remove function after the pick function and file is not being removed. (from here https://www.filepicker.com/documentation/file_ingestion/javascript_api/remove?v=v2)
selectFileMedium: function () {
filepicker.pick({
cropRatio: 24/13,
mimetype: 'image/*',
imageDim: [1440, 780]
}, function (Blob) {
InnerThis.uploadMediumImage(Blob.url, Blob.filename);
filepicker.remove(Blob);
});
}
Am I doing this correct?
Blob object return url property which is unificated url of uploaded file eg:
https://www.filepicker.io/api/file/AQgF2U68SNmJDpDXlOdg
However since v2 dialog version there is crop UI avaliable. If user crop file as a response it return the uploaded file url with appended Rest convert parameters:
https://www.filepicker.io/api/file/AQgF2U68SNmJDpDXlOdg/convert?crop=100,200,200,300
filepicker.remove dose not deal with it. Some temporary workaround would be to strip url from '/convert' part just before remove it. However it should be solved on library side.
Related
I've got a site that accepts file uploads which are sent as multipart/form-data within a POST request. To verify that the upload, which shows the filename afterwards, is secured against XSS I want to upload a file which contains HTML Tags in the filename.
This is actually harder than I expected. I can't create a file containing < on my filesystem (Windows). Also, I don't know a way to change the filename of the file input element inside the DOM before the upload (which is what I would do with normal/hidden inputs). So I thought about editing the POST body before it's uploaded, but I don't know how. Popular extensions (I recall Tamper Data, Tamper Dev) only let me change headers. I guess this is due to the plugin system of Chrome, which is the Browser I use.
So, what's the simplest way of manipulating the POST requests body? I could craft the entire request using cUrl, but I also need state, lots of additional parameters and session data etc. which gets quite complex... A simple way within the Browser would ne nice.
So, while this is not a perfect solution, it is at least a way to recreate and manipulate the form submit using FormData and fetch. It is not as generic as I'd like it to be, but it works in that case. Just use this code in the devtools to submit the form with the altered filename:
let formElement = document.querySelector('#idForm'); // get the form element
let oldForm = new FormData(formElement);
let newForm = new FormData;
// copy the FormData entry by entry
for (var pair of oldForm.entries()) {
console.log(pair[0]+': '+pair[1]);
if(typeof(pair[1]) == 'object' && pair[1].name) {
// alter the filename if it's a file
newForm.append(pair[0],pair[1],'yourNewFilename.txt');
} else {
newForm.append(pair[0],pair[1]);
}
}
// Log the new FormData
for (var pair of newForm.entries()) {
console.log(pair[0]+': ');
console.log(pair[1]);
}
// Submit it
fetch(formElement.action, {
method: formElement.method,
body: newForm
});
I'd still appreciate other approaches.
I'm using File Picker for handling files for my web application. In my front end app I have the URL to the file's handle (ex. https://www.filepicker.io/api/file/H7KYuWy1S3e1qvG2M66i), but I don't have it's complete inkBlob.
The file is an image and I want to do a convert operation on this file. It seems that I am required to include the mimetype when calling on the convert function.
Taken from File Picker's API documentation on convert, this works:
var inkblob = {
url: 'https://www.filepicker.io/api/file/H7KYuWy1S3e1qvG2M66i',
filename: 'customers.jpg', mimetype: 'image/jpeg',
isWriteable: false, size: 629454
};
var result = document.getElementById("convert-result");
filepicker.convert(inkblob, {width: 200, height: 200},
function(new_InkBlob){
console.log(new_InkBlob.url);
result.src = new_InkBlob.url;
}
);
The same code works with an inkblob like this:
var inkblob = {
url: 'https://www.filepicker.io/api/file/H7KYuWy1S3e1qvG2M66i',
mimetype: 'image/jpeg',
};
However, the convert does not work if you exclude the mimetype and only include the url.
In my situation it requires me to first do a stat call against the filehandle to retrieve the mimetype from File Picker's API, then send the mimetype right back to filepicker when I do the convert command.
Is it possible to make it so the mimetype is omitted and File Picker looks the mimetype up internally if it isn't included in the convert command?
For convert() method, mimetype is just a security check to ensure you pass an image. If you pass 'image/jpeg' even if it's not the correct mimetype for the image, it should work just fine. So no need to stat file every time.
For other people wanting answer to this question, here are some more information we communicated on mail:
The answer they gave on mail:
For convert() method, mimetype is just a security check to ensure you
pass an image. If you pass 'image/jpeg' even if it's not the correct
mimetype for the image, it should work just fine. So no need to stat
file every time.
My answer back:
Hi, and thanks for your answer.
It sounds to me like the inclusion of mimetype when calling on the
convert() function is redundant. You tell me I should be able to
simply pass in a fixed mimetype thus I cannot see how this is a useful
security check. If you want to ensure the convert command is executed
on an image File Picker already knows which mimetype a file has and I
believe this should be handled internally when the convert() command
is executed not trusting client's claim of a mimetype on a file.
I haven't tried this; but what happens if I do a convert command with
mimetype set to 'image/jpeg' on a text file? I guess it will fail
which is another reason for me thinking this mimetype requirement on
convert command is obsolete.
Answer from filepicker:
This is really just basic protection from accidental passing files
other than image to the convert call. I'm aware this can be redundant
for you but it works in 95% of cases and we never had issue with this.
I am using Blueimp JqueryFileUpload, when i tried to upload my very first file its not uploading. But After i tried the same file or any file its working.
I can't figure out whats goes wrong for the very first upload.
While debugging i can found that the fileupload method not triggered for the first upload but followed consecutive uploads say second,third,.. its triggering
$('#fileUpload').fileupload({
url: 'home/upload',
dataType: 'json',
done: function (e, data) {
//do something
}
});
Are you generating the input file field after the page loads? I had the same issue because I forgot to initialize .fileupload() after the input field was appended.
Initialize .fileupload() method after form or form field is generated.
like
$('#fileupload'+rowNum).fileupload();
here $('#fileupload'+rowNum) is a dynamic form id.
I've been trying to learn Ember and I have a question.
In my store I'am getting data from .json like below. I have tried without buildUrl function but cant load the json file, then found this solution on SO.
CocktailApp.Store = DS.Store.extend({
revision: 12,
adapter: DS.RESTAdapter.extend({
bulkCommit: false,
url: "http://localhost:8888",
buildURL: function(record, suffix) {
var s = this._super(record, suffix);
return s + ".json";
}
})
});
Now comes my question: When I commit the chances (by pressing add to favs or remove from favs) RESTAdapter adds ".json" at the end of to PUT request. See the below code and screenshot
CocktailApp.CocktailController = Ember.ObjectController.extend({
addToFav: function () {
this.set('fav',true);
this.get('store').commit();
},
removeFromFav: function () {
this.set('fav',false);
this.get('store').commit();
}
});
I think thats why my PUT request can not be handled. But If I remove the builtURL function no json loaded at all. How can I resolve this problem?
Thanks
If the API endpoint url does not require .json at the end of it, then remove that line from your buildURL function. My guess is that the example code you got was consuming a ruby on rails api, or something similar.
remember, when you send a GET, PUT, POST, or DELETE to a url, that url needs to actually be a real endpoint. You can't just add extraneous stuff to it and have it still work.
It would be great if we could manage the titles of each image that we upload when uploading multiple images. This way I could select each image that I want to upload, title them, then hit the upload button. Right now one must either upload one by one or have all the selected images have the same title.
Kinda like Facebook or Panoramio where it's easy to manage the titles of the images before uploading.
This isn't natively supported in Fine Uploader at the moment, but I've opened up a feature request and tentatively scheduled it for the 3.7 milestone. In the meantime, you can certainly provide your own UI elements to allow users to provide alternate names for each upload-able item and pass these new names as a parameter. Server-side, you would have to parse this parameter and associate it with the uploaded item. Fine Uploader will have to adopt a parameter name that contains the user-supplied alternate filename anyway (and the server will have to be aware of this convention and parse this parameter), since we won't be able to change the value file input field sent along with the multipart encoded request.
use this:
var uploader = $('.uploader'),
titleBox = $('input[type=text]');
uploader.fineUploader({
request: {
endpoint: 'path/to/url'
},
formatFileName: function (name) {
var title = titleBox.val() + ' - ' + name + '';
titleBox.val('');
return title;
},
});
uploader.on('submit', function (event, id, name) {
uploader.fineUploader('setParams', {title: titleBox.val()}, id);
});