I'm cropping image before upload to server so integrated cropping module. I want to upload cropped image to server but ngx uploader uploading original image.
I have used ngx-uploader ngx-uploader: "6.0.1" and for cropper used "ngx-image-cropper": 1.2.3.
For uploader : https://stackblitz.com/edit/ngx-uploader
For Cropper : https://www.npmjs.com/package/ngx-image-cropper
Following function get called on crop success.
startUpload(): void {
const event: UploadInput = {
type: 'uploadAll',
url: 'server path'
method: 'POST',
headers: 'custom header',
file: this.croppedImage,
};
this.uploadInput.emit(event);
}
Related
I am using react-native-photos-framework for creating user defined album and creating assets into device native gallery.
In my app I gives an user defined album creation functionality to user. For that I am displaying a simple modal with input field where user can type album name and 'OK' and 'CANCLE' button.
What I want ?
I want that when user click on 'OK' button after typing album name in input field, a typed album should be created in gallery and one by default image (which is in my local directory) should added to that album.
Here is the code that i used :
createAlbum() {
RNPhotosFramework.createAlbum(this.state.createAlbumName).then((album) => {
RCTCameraRollRNPhotosFrameworkManager.createAssets({
images : [{ uri : '../assets/logo.png' }],
album : album,
includeMetadata : true
});
}).catch((error)=>{
alert("Error in creating album : \n"+JSON.stringify(error));
});
}
As you can see, I am first creating album which is creating successfully in gallery, But assets is not copying in that album. It is giving me this error :
Could not find image file:///Users/vision/Library/Developer/CoreSimulator/Devices/E5AA1780-A55C-4C67-95A5-222E4AS3PA23/data/Containers/Bundle/Application/5E37FAF5-15DD-483B-3BD6-C311C587SD8/CameraApp.app/../assets/imgs/logo.png
I have also used require() to get image uri as follow :
images : [{ uri : require('../assets/logo.png' )}],
but then app will crash.
Here is the my project structure :
Please help me how I can create asset of local static image using react-native-photos-framework. I am new to react native !!!
If anyone also running in this problem I have solved problem using this answer.
To solve the problem first install react-native-fs.
Then import it in your project.
const RNFS = require('react-native-fs');
Then I used RNFS.MainBundlePath to get my app root path and add assets before my actual path.
Here is code :
createAlbum() {
RNPhotosFramework.createAlbum(this.state.createAlbumName).then((album) => {
RCTCameraRollRNPhotosFrameworkManager.createAssets({
images : [{uri:RNFS.MainBundlePath+'assets/src/assets/imgs/logo.png'}],
album : album,
includeMetadata : true
}).then((result)=>{
alert(JSON.stringify(result));
}).catch((error)=>{
alert("Error in creating assets.\n"+JSON.stringify(error));
});
});
}
Hope it will help someone.
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
I have implemented my sencha architect project with a possibility to do a photo (with phonegap). After taking a photo, I need to see the photo directly into another container with other information (the picture will be smaller than the original...and there will be written above and below).
How do I open the new container and display the image in a smaller size?
please help me, I don't understand how can I manage the photo
Now I use this code but if you have something better....
var me = this;
Ext.device.Camera.capture({
success: function(image) {
me.add({
xtype:'image', // Commento
src: image
});
},
source: 'camera',
cameraDirection: navigator.camera.Direction.FRONT,
destination: 'file'bu
});
thank you
Carlo
Sencha documentation got an example for it. See http://docs.sencha.com/touch/2.3.1/#!/api/Ext.device.Camera
Ext.device.Camera.capture({
success: function(image) {
imageView.setSrc(image);
},
quality: 75,
width: 200,
height: 200,
destination: 'data'
});
You can also use
destination: 'url'
in that case the image argument of the callback function will be a file URL what you can use in a container template as the source of the html image.
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
iam new sencha touch.
Iam doing one project , in that project i need to convert the images to base64 string, iam uploading the image, and iam getting fulll path of image, but iam unable to convert image to base64 string.
plz help me in this issue.
make sure that iam asking in sencha touch
How do you access the files? Where the images are coming from? If they are from the camera or the photo gallery then Phonegap is the best way to get them. Base64 encoding is solved by PG in that case. If you are trying to solve it in pure js then you need to do some more work on it. Sencha doesn't provide functions for base64 encoding. So the best bet if you add some function to your project. There are lots of resources on the web how to do base64 encoding in javascript. E.g. see the discussion here Base64 encoding and decoding in client-side Javascript
The following code snippet helps you for uploading image and get base64 data uri
In your view you should have the following filefield component of sencha touch
Ext.define('MyApp.view.Main', {
extend: 'Ext.form.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype: 'filefield',
id: 'idfilefieldSample',
name: 'filefieldSample',
accept: 'image'
},
]
}
});
and your controller look like this:
Ext.define('MyApp.controller.MainController', {
extend: 'Ext.app.Controller',
config:{
control:{
'filefield[name=filefieldSample]': {
change: 'onChangefilefield',
},
}
},
onChangefilefield: function(filefield, newData, oldData, eOpts)
{
var filesSelected = Ext.getCmp('idfilefieldSample').getComponent().input.dom.files;
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var srcData = fileLoadedEvent.target.result;
console.log(srcData);
}
fileReader.readAsDataURL(fileToLoad);
}
},
});