I've tried to restrict file types that can be selected by Expo.DocumentPicker.getDocumentAsync, but without success.
How to filter many mimeTypes at once?
I already tried as follow:
Expo.DocumentPicker.getDocumentAsync({type: "image/*;application/pdf"});
and
Expo.DocumentPicker.getDocumentAsync({type: "image/*,application/pdf"});
and
Expo.DocumentPicker.getDocumentAsync({type: ["image/*","application/pdf"]}); //CRASH
I'm using sdk 27.0.0.
Some suggestion? Expo team? :}
Reference:
https://docs.expo.io/versions/latest/sdk/document-picker#type-string----the-mime-type-of
Currently, it seems that we can't pass multiple mime types on document picker of expo as it is of string type and not an array. Also there's an open issue regarding the same here
I tried to implement similar to this using any one of the following MIME types to upload certain file types only:
let result = await DocumentPicker.getDocumentAsync({
type: "*/*" // all files
// type: "image/*" // all images files
// type: "audio/*" // all audio files
// type: "application/*" // for pdf, doc and docx
// type: "application/pdf" // .pdf
// type: "application/msword" // .doc
// type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" // .docx
// type: "vnd.ms-excel" // .xls
// type: "vnd.openxmlformats-officedocument.spreadsheetml.sheet" // .xlsx
// type: "text/csv" // .csv
});
for other MIME types, checkout this
Related
I'm having troubles uploading doc and docx files, because I can't get the right type of file when converting it to base64. This is my input:
<input
accept=".pdf,.txt,.doc,.docx"
type="file"
(change)="onNativeInputFileSelect($event)"
#inputFile
hidden
/>
In my method I do this:
onNativeInputFileSelect(event) {
if (event.target.value) {
const file: File = event.target.files[0];
this.changeFile(file).then((base64: string): any => {
this.attachment.content= base64;
this.uploadFile(this.attachment);
});
}
}
then in "uploadFile" I send the file to server as base 64 string.
The changeFile methods is this:
changeFile(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
This works fine for pdf or txt files, but when I upload .doc or .docx files I get this base64 string:
data:application/octet-stream;base64,0M8R4KGxGuEAA[...]
while for pdf I correctly have:
data:application/pdf;base64,JVBERi0xLjQKJeLjz9MKMS
This means that when I try to download the file I don't get the correct type, because I have application/octet-stream, and so I can't put the right extension to the file.
I've tried by passing to the accept property of input component this:
application/msword,application/pdf,text/plain,application/vnd.openxmlformats-officedocument.wordprocessingml.document
But nothing changed and the Window's file chooser suggested me only .pdf and .txt files
EDIT
This is a working stackblitz
I get "data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,UEsDBB[...]" for docx and "data:application/msword;base64,0M8R4KGxGuv[...]" for doc file.
How do I get an image preview for a Types.File field in the admin UI.
It says "The FS adapter supports all the default Keystone file schema fields. It also additionally supports and enables the filename path (required)." However when I try (doc):
format: function(item, file){
return '<img src="/files/'+file.filename+'" style="max-width: 300px">'
}
Nothing appears in the UI
The format function hasn't been working for a while as far as I can tell from the Keystone GitHub. I don't know if the function exists in Keystone 4.0. Reference here.
You could fork the current beta and patch the function yourself if you need this immediately.
You can find it at https://github.com/keystonejs/keystone/blob/v4.0.0-beta.5/fields/types/file/FileType.js#L81
Doesn't seem right to me, though. I hope they will fix it before releasing 4.0, along with the missing File Array type.
Image previews are now possible in the latest master branch of keystone (see https://github.com/keystonejs/keystone/pull/4509). At the moment you need to depend on the git version of keystone, so put this in your package.json and run npm install:
"keystone": "https://github.com/keystonejs/keystone.git"
In your model, specify thumb: true on the image field in question. You also need the url property in the schema. For example:
const storage = new keystone.Storage({
adapter: keystone.Storage.Adapters.FS,
fs: {
path: keystone.expandPath('./uploads/images'),
publicPath: '/images/'
},
schema: {
url: true,
}
})
ImageUpload.add({
name: { type: Types.Key, index: true },
image: {
type: Types.File,
storage: myStorage,
thumb: true
},
createdTimeStamp: { type: String }
});
The admin UI should now show a small preview of the image and a link to it.
i am working on Extjs4 file upload control. i have view with file upload control as-
Ext.define('Balaee.view.kp.dnycontent.Content',
{
extend:'Ext.form.Panel',
requires:[
'Balaee.view.kp.dnycontent.ContentView'
],
id:'ContentId',
alias:'widget.Content',
enctype : 'multipart/form-data',
title:'This day in a history',
items:[
{
xtype: 'fileuploadfield',
hideLabel: true,
emptyText: 'Select a file to upload...',
//inputType: 'file',
id: 'upfile',
width: 220
}],
buttons: [{
xtype : 'button',
fieldlabel:'upload',
action:'upload',
name:'upload',
text: 'Upload',
formBind:'true'
}]
});
And corresponding action in controller is-
getUpload : function() {
var file10 = Ext.getCmp('ContentId').getEl().down('input[type=file]').dom.files[0];
var reader = new FileReader();
reader.onload = function(oFREvent) {
fileobj=oFREvent.target.result;
console.log(oFREvent.target.result);
};
}
});
So above controller's function is retriving uploaded file and displaying it in encoded format inside reader's onload function. i.e. "console.log(oFREvent.target.result);" line is displaying uploaded file's data in encoded format in console. I need to send this file to server side. So i am passing above fileobj as parameter to store as-
var storeObj=this.getStore('kp.DnycontentStore');
storeObj.load({
params:{
data:fileobj
},
callback: function(records,operation,success){
console.log("send");
},
scope:this
})
But its showing fileobj as undefined outside reader.onload function. So how to send this file along with its contents to server side? Is there any other way to get uploaded file in controller and send it to server. Please can someone guide me.
I dont know how to handle fileuplaod on php side, but the return response from the server needs to be text/html encoded
See the docs on this:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Basic-method-hasUpload
also example PHP fileupload script:
http://www.w3schools.com/php/php_file_upload.asp
I'm looking to build a photo management app and I've decided to use Filepicker.io with Amazon s3 to manage the uploads/hosting of static files. I plan on having Filepicker handle the upload of images to s3, and then I will store the url of the image in a database -- these urls will be embedded in a template. For example,
HTML:
<input type="file" name="datafile">
{{#if src}}
<img src='{{src}}'>
{{/if}}
Javascript :
'change input' : function (e, t) {
var file = e.currentTarget.files[0];
if (file) {
filepicker.store(file, function(fp){
// Set URL to fpURL
}, function(err){
console.log('error', err);
}, function(progress){
console.log('loading', progress);
});
}
}
My question: Is it better to store the filepicker url in the database? Or should I be saving the key url, which can link directly to s3?
My filePicker success object looks like this:
{url: "https://www.filepicker.io/api/file/wppeyWAUQaaX0HPgXQ",
size: 76511, type: "image/png",
key: "EdqmSpbDQziIvSfI4g_logo.png",
filename: "logo.png"}
We recommend storing the URL directly, as that way you can take advantage of the conversion features and other functionality we provide on top of the URLs. Plus, you don't have to mess with the S3 APIs directly and can perform GETs and POSTs on the url instead
I am using wicked_pdf plug-in for generating pdf. I am showing message and spinner when user click on pdf link and i want to hide that when pdf is generated and pushed to browser for download/show. I have added jquery code on body onload which will not execute. Is there any other way to trigger jquery function when pdf file pushed to browser?
This is a rather complicated issue, but can be solved nicely if you are willing to use jQuery plugins. http://jqueryfiledownload.apphb.com/ is a plugin that can do exactly what you need if I understood you correctly.
My frontend code looks like this
$.fileDownload('/Content/Print', {
successCallback: function (url) {
$("#PrintingMessage").dialog('close');
},
failCallback: function (responseHtml, url) {
$("#PrintingMessage").dialog('close');
if (responseHtml.indexOf('Error403') != -1) {
$("#PrintingFailedMessage").html("Error 403.");
} else if (responseHtml.indexOf('Error500') != -1) {
$("#PrintingFailedMessage").html("Error 500.");
}
$("#PrintingFailedMessage").dialog({ modal: true });
},
httpMethod: "POST",
data: $('#PublishForm').serialize()
});
And my backend does this at the end of the process. You'll have to translate that yourself :)
Response.SetCookie(new System.Web.HttpCookie("fileDownload", "true") { Path = "/" });
return File(file, System.Net.Mime.MediaTypeNames.Application.Octet, filename);