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.
Related
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);
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
}
}
})
}
I have a block of code which would upload the file into the Google Drive. My main issue here is that when the user clicks on the upload button, the MD5 hash of the file will be checked and compared with the MD5 hashes of other files in the Google Drive and if there is a duplicate, then a message pop-up should be displayed stating that the file is a duplicated file and the user would need to reupload the file again.
This is from my GetGoogleDrive.cshtml file.
#using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<p>
<label for="file">Upload file:</label>
<input type="file" name="file" id="file" />
<input type="submit" value="Upload" id="fileUpload" />
<script>
$('#fileUpload').click(function (e) {
if ($('#file').val() === "") {
Swal.fire({
title: 'Nothing',
text: 'No file selected',
type: 'error',
confirmButtonText: 'Again!!',
timer: 4000
})
}
else {
Swal.fire({
title: 'Wait awhile...',
text: 'File will be uploaded shortly',
type: 'success',
confirmButtonText: 'Okay, cool',
timer: 4000
})
}
});
</script>
The following code is for my upload file controller class.
[HttpPost]
public ActionResult UploadFile(HttpPostedFileBase file)
{
GoogleDriveFilesRepository.FileUpload(file);
return RedirectToAction("GetGoogleDriveFiles");
}
This is the code for my Google Drive Files model class.
public static void FileUpload(HttpPostedFileBase file)
{
if (file != null && file.ContentLength > 0)
{
DriveService service = GetService();
string path = Path.Combine(HttpContext.Current.Server.MapPath("~/GoogleDriveFiles"),
Path.GetFileName(file.FileName));
file.SaveAs(path);
HashGenerator(path);
compareHash(HashGenerator(path));
var FileMetaData = new Google.Apis.Drive.v3.Data.File();
FileMetaData.Name = Path.GetFileName(file.FileName);
FileMetaData.MimeType = MimeMapping.GetMimeMapping(path);
FilesResource.CreateMediaUpload request;
using (var stream = new System.IO.FileStream(path, System.IO.FileMode.Open))
{
request = service.Files.Create(FileMetaData, stream, FileMetaData.MimeType);
request.Fields = "id";
request.Upload();
}
}
}
Where should I generate the MD5 hash value of the file? In the C# or the JS?
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>
Using one of the comments/answers I fixed the photo viewing, however it does not load sometimes if the image is too big. It would be great to see an example of code to turn an image into a thumbnail.
<template name="photos">
<form>
<input id="file" type="file">
<input id="addFile" type="submit">
</form>
{{#each images}}
<div>
<img src="{{this.url store='images' uploading='/images/uploading.jpg' storing='/images/storing.jpg'}}" alt="" class="thumbnail" />
</div>
{{/each}}
</template>
Javascript:
if (Meteor.isServer) {
// Create server database for listings
var Images = new FS.Collection("images", {
stores: [new FS.Store.FileSystem("images", {path: "~/uploads"})]
});
Template.photos.events({
'click #addFile' : function(e, t){
var file = t.find('#file').files[0];
var ticket = this._id;
var newFile = new FS.File(file);
newFile.metadata = {
ticketId: ticket
};
Images.insert(newFile, function (err, fileObj) {
if (!err) {
console.log(fileObj);
}
});
}
});
Template.photos.helpers({
images: function () {
return Images.find(); // Where Images is an FS.Collection instance
}
});
}