I wrote a function that saves an image as blob:
render() {
...
return (
...
<input
accept="image/*"
onChange={this.handleUploadImage.bind(this)}
id="contained-button-file"
multiple
type="file"
/>
)}
and this is the function called in onChange:
handleUploadImage(event) {
const that = this;
const file = event.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = () => {
that.setState({
image: URL.createObjectURL(file),
userImage: reader.result,
});
};
}
I think this works fine because it saves in DB because the document has a field called image which looks like this: blob:http://localhost:3000/80953c91-68fe-4d2a-8f5e-d9dd437c1f94
this object can be accessed like this.props.product, to access the image it is this.props.product.image
The problem is when I want to show the image, I don't know how to do this.
I tried to put it in render like:
{
this.props.product.image ? (
<img alt="" src={this.props.product.image} />
) : (
null
);
}
it throws this error:
and the header:
any suggestions?
You should try URL.createObjectURL(blob)
https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
myImage.src = URL.createObjectURL(blob);
Related
I am trying to update the user profile data in my database, but I am stuck at the user profile image. I can't use the v-model for binding, and with v-on:change it doesn't work. This is my code so far, it is working properly, the only issue being the binding.
<template>
-----
<div v-if="!image">
<h2>Select an image</h2>
<input type="file" #change="onFileChange" /> ---->here I would like to use the v-model but can't use it on input type="file"
</div>
<div v-else>
<img :src="image" />
<button #click="removeImage">Remove image</button>
</div>
<input
type="text"
placeholder="Userame"
v-model="user.username"
required
/>
<button
type="button"
class="btn btn-outline-warning waves-effect"
aria-label="Left Align"
#click.prevent="updateProfile(user)"
>
Update profile
</button>
---
</template>
<script>
export default {
data: function () {
return {
user: {},
image: ''
};
},
methods: {
onFileChange(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createImage(files[0]);
},
createImage(file) {
var image = new Image();
var reader = new FileReader();
var vm = this;
reader.onload = (e) => {
vm.image = e.target.result;
};
reader.readAsDataURL(file);
console.log(file.name);
},
removeImage: function (e) {
this.image = '';
},
updateProfile() {
store
.dispatch("updateProfile", {
username: this.user.username,
email: this.user.email,
profileImage: this.file ------>I need it for the binding here
</script>
You forgot to bind the file to this.file. Update your onFileChange method to this 👇🏻, it will work.
Note: v-model only works with input which use value binding, where input type file doesn't use input value, it makes no sense to use input type file with v-model
onFileChange(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
this.file = files[0]
this.createImage(this.file);
},
I try to preview a image before upload, I want to dispaly a small one, and on click to be full size, but till now it didn't work. I am using vue-upload-component, file.thumb from them also didn't work.
data() {
return {
url:null,
}
}
watch: {
files: {
handler: function(){
this.files.forEach((file,index) =>{
const file = e.target.file[0];
this.url = URL.createObjectURL(file);
console.log('Files:',this.files);
})
},
}
}
//First try found on stack
<div id="preview">
<img v-if="url" :src="url" />
</div>
//This is from them , but is not working.
<img v-if="file.thumb" :src="file.thumb" width="40" height="auto" />
<span v-else>No Image</span>
UPDATE
Now the small image it works, I just need to add some things form that library.
Now I just need to preview full size img hen click.
<img v-if="file.thumb" :src="file.thumb" width="40" height="auto" />
You are using the this from the forEach scope, try initializing the global ViewModel to be able to access the data params, like this :
watch: {
files: {
handler: function(){
let vm = this;
this.files.forEach((file,index) =>{
const file = e.target.file[0];
vm.url = URL.createObjectURL(file);
console.log('Files:',vm.files);
})
},
}
}
Can you try this?
handler: function(){
this.files.forEach((file,index) =>{
const file = event.target.files[0];
if (file) {
let reader = new FileReader();
reader.onload = (e: any) => {
this.url = e.target.result; //Base64 string
}
}
})
}
Upload images and form content? How to upload? The idea is to upload it to the client and then upload it to the server along with the form content, right?
I want to upload the form content and the image to the server when I click submit, instead of uploading the image separately when I upload the image.
But I don't know how to upload at the same time. Can you help me?
<template>
<form>
<input type="text" v-model="test">
<img :src="previewImage" class="uploading-image" />
<input type="file" accept="image/jpeg" #change=uploadImage>
<input type="submit"></input>
</form>
</template>
export default {
data(){
return{
previewImage:null,
test: ''
}
},
methods:{
uploadImage(e){
const image = e.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(image);
reader.onload = e =>{
this.previewImage = e.target.result;
console.log(this.previewImage);
};
const URL = 'http://xxxx';
let data = new FormData();
data.append('name', 'my-picture');
data.append('file', event.target.files[0]);
let config = {
header : {
'Content-Type' : 'image/png'
}
}
axios.put(URL, data,config).then(response => {
console.log('image upload response > ', response)
})
}
}
You need to add this to the form
<form #submit.prevent="uploadImage">
<input type="text" v-model="test">
<img :src="previewImage" class="uploading-image" />
<input type="file" accept="image/jpeg" >
<input type="submit"></input>
</form>
I have one strange problem by uploading files using React JS.
The main component is as follows:
class Test extends React.Component {
constructor(props){
super(props);
this.state = {
files: [
{file_type: registrationFormFields.ID_CARD.key, values: {active: false, fileName: language.btnIdCard, file: null, base64: ""}},
{file_type: registrationFormFields.STATUTES.key, values: {active: false, fileName: language.btnStatut, file: null, base64: ""}},
{file_type: registrationFormFields.BLANK_LETTER_HEAD.key, values: {active: false, fileName: language.btnBlanco, file: null, base64: ""}},
{file_type: registrationFormFields.COMPANY_PHOTO.key, values: {active: false, fileName: language.btnCompanyPhoto, file: null, base64: ""}}
]
};
}
handleFiles(file_type, event){
event.preventDefault();
let self = this;
let fileValue = event.target.value;
let files = "";
let file = event.target.files[0];
let filename = file.name.substr(0, file.name.lastIndexOf('.')) || file.name;
const size_in_mb = file ? file.size/1000000 : null;
if(this.fileIsValid(file_type, size_in_mb)){
if(fileValue){
this.getBase64(file, function(e){
let base64 = e.target.result;
let nState = self.state.files;
if(self.state.files.some(i => i.file_type === file_type))
nState = self.state.files.filter(f => f.file_type !== file_type);
files = [...nState, {file_type: file_type, values: {active: true, fileName: filename, file, base64: base64}}];
self.setState({files: files});
});
}
}
}
removeFile = (file_type, file_name) => {
let nState = this.state.files;
let nFiles = this.state.files;
if(this.state.files.some(i => i.file_type === file_type)){
nState = this.state.files.filter(f => f.file_type !== file_type);
nFiles = [...nState, {file_type: file_type, values: {active: false, fileName: file_name, file: null, base64: ""}}];
}
this.setState({files: nFiles});
};
render(){
return (
<FileInputButton pictureIcon="credit-card"
onFileChange={this.handleFiles.bind(this, registrationFormFields.ID_CARD.key)}
btnName="idCard"
extraClass="col-lg-offset-2 col-md-offset-2 col-sm-offset-2"
fileType={registrationFormFields.ID_CARD.key}
fileName={language.btnIdCard}
removeFile={this.removeFile}
errors={this.state.errors[registrationFormFields.ID_CARD.key]}
values={this.getValues(registrationFormFields.ID_CARD.key)}/>
)
}
}
React.render(<Test />, document.getElementById('container'));
There is more code but this is the important one.
And FileInputButton component is as follows:
const FileInputButton = ({extraClass, pictureIcon, btnName, onFileChange, values, removeFile, fileType, fileName, errors}) => {
const name = values.fileName === fileName ? `Add ${fileName}` : `Added ${fileName}`;
const icon = values.active ? "check" : "upload";
let borderClass = "";
if(values.active) borderClass = "fileSuccess";
if(errors) borderClass = "fileError";
let removeButton = "";
if(values.active){
removeButton = <div className="remove-file" onClick={() => removeFile(fileType, fileName)}><Ionicon icon="ios-close" fontSize="22px" color={styles.errorColor}/> Remove</div>
}
let added_file = "";
if(values.active){
added_file = <div className="added-file-name"><Ionicon icon="ios-checkmark" fontSize="22px" color={styles.successColor}/>{values.file.name}</div>
}
return (
<div className={`col-lg-4 col-md-4 col-sm-4 ${extraClass}`}>
<div className="picture-container" style={{marginLeft: 18}}>
<div className={`picture ${borderClass}`}>
<FontAwesome name={pictureIcon} size="3x" className="picture-src"/>
</div>
</div>
<div className="uploadButtonBox" style={{width: '100%', textAlign: 'center', marginTop: 20}}>
<label className={`fileUploadButton ${borderClass}`}>
<FontAwesome name={icon} className="faIcon" style={{height: '39px !important'}}/>
<span className={`btnFileText ${btnName}`}>{name}</span>
<input id="btnFile" type="file" style={{display: 'none'}} onChange={onFileChange} name={name}/>
</label>
</div>
{added_file}
{removeButton}
<div className="errorBox">{errors}</div>
</div>
);
};
Everything works fine. There is only one scenario when it doesn't work as expected.
If the file is chosen little remove button (the removeButton from FileInputButton component) is shown. If I click on it the removeFilefunction from main component gets called, and I change the state (find that file in state, remove it, and add a new object with initial values for that file and then update the state).
The file is removed and everything works fine. If I new add a new file, that works also as expected. The problem is if I try to add the same file again, then it doesn't work. The handleFiles function isn't called at all.
If I add first file and then remove it, then add new second file then remove the second file and then again add the first file it works fine.
Only problem is if I add first file, then remove it and then try to add it again it doesn't work. I do not get any errors in console.
Any idea what I do wrong?
You have onChange handler on your file input, however when you clear file from your state, you are not clearing it from your input. So when you are trying to upload the same file again, onChange event is not triggered therefore your handler is not called.
Put your input file value to '' to reset it.
Lets say that your delete handler would look like this.
handleDelete(){
document.querySelector('input[type=file]').value = '';
this.props.removeFile(this.props.fileType, this.props.fileName);
}
This code may be not entirely in the spirit of your code, but you will get the point.
I am using Symfony2.8 With aviaryeditor Image Editor. The Scene is that I have from with one file upload field. I wanted to allow user to upload images and do some editing with images (cropping, resizing, effects) then upload it to the server. And on the backend i get the file. Do some checks and validation and upload it on my local file system of s3.
What i have done so far is, I allow user to upload the image from the user and dislay the uploaded image in the form. On image click the editors pops up and after editing the gives the new url (s3 url of avairy api).
$builder
->add('media', 'file', array(
'data_class' => null,
'label' => ucfirst('Choose Domicile File'),
'attr' => array('class' => 'form-control')
)
)
<div class = "form-group col-xs-5">
<label class="control-label">{{ form_label(domicileForm.media) }}</label>
<div class="text-center">
{{form_widget (domicileForm.media, {'attr': {'class': 'form-control'}})}}
</div>
<img id="blah" src="#" alt="your image"
class="img-responsive img-thunmbail"
onclick="return launchEditor(this.id, this.src);" />
</div>
and with js
<script>
$(document).ready(function() {
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#pncmisdashboard_bundle_dimicile_type_media").change(function(){
readURL(this);
});
});
</script>
<script type="text/javascript" src="http://feather.aviary.com/js/feather.js"></script>
<!-- Instantiate Feather -->
<script type='text/javascript'>
var featherEditor = new Aviary.Feather({
apiKey: '43232',
apiVersion: 3,
theme: 'light', // Check out our new 'light' and 'dark' themes!
tools:'crop,resize,color,sharpness,text',
appendTo: '',
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
$(imageID).attr('src', newURL);
// //copy the url to the hidden form field
// $('#pncmisdashboard_bundle_dimicile_type_media').val(newURL);
$('#pncmisdashboard_bundle_dimicile_type_media').attr('value', newURL);
img.src = newURL;
alert(imageID);
alert(newURL);
alert(imageID);
},
onError: function(errorObj) {
alert(errorObj.message);
}
});
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src
});
return false;
}
</script>
and after the api successfully return the url of new image, I am setting this url to media (file type) field. But it's not happening. it saves the orignal image that was first upload not the new one.