currently iam facing one issue if i upload a image the image getting upload. second time when i am trying to upload the image. The image is upload but the previous image is not showing up there only the current image is showing but in the preview i can see the previous image for example.
now I am uploading some more images in the left hand side the previous uploaded images not showing
Here is my html
<div class="panel-body text-center">
<img id="testImage" (dragover)="false"(dragend)="false"
(drop)="handleDrop($event)" class="images-item-upload" *ngFor='let item of urls' [src]="item.url" (click)="onClik(item);"/>
<label class="btn btn-default btn-block file-container">
<i class="fa fa-fw fa-upload"></i> Choose a file
<input type='file' [disabled]="urls.length >= 16" multiple (change)="readUrl($event);">
</label>
</div>
Here is my stackblitz link for the reference
In the upload history the previous upload images not showing only the current upload only showing
What I am doing wrong here why the image is not displaying
Ts code
addImage(canvasInst, imageUrls) {
if(imageUrls){
fabric.Image.fromURL(imageUrls, img => {
var oImg = img;
oImg.scaleToWidth(250);
oImg.scaleToHeight(250);
canvasInst.centerObject(oImg);
canvasInst.add(oImg).renderAll();
canvasInst.setActiveObject(oImg);
// canvasInst.toDataURL({ format: "png", quality: 0.8 });
});
this.updateLayers();
}
}
I got the anwser in my readUrl i have to remove my
this.urls= []
Related
I'm working on a django project where I need to permit the user to upload images to the server. Everything's fine except when I want to show an image preview before submitting.
I'm using django-crispy-forms to render the form:
class PostForm(forms.ModelForm):
class Meta:
model = Post
fields = ["image", "caption"]
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_method = "post"
self.helper.form_action = 'add-post'
self.helper.add_input(Submit("add-post", "Add Post", css_class='btn-primary btn-dark mt-3'))
This is the HTML template used for rendering the form:
<div class="row justify-content-center mt-4">
<div class="col-md-8">
{% crispy form %}
</div>
</div>
This based on the developer inspector in firefox yields the following input HTML:
<input type="file" name="image" class="custom-file-input" accept="image/*" id="id_image" required="">
<label class="custom-file-label text-truncate" for="id_image">---</label>
After hitting the submit button, the label gets filled with image name. That's exactly what I want.
However, as mentioned I wanted an image preview before submitting so I took look at the following stackoverflow answer and got what I want:
preview image before form submit
Show an image preview before upload
I managed to get an image preview using the following js and HTML:
<div class="row justify-content-center mt-4">
<img id="image-preview">
</div>
<div class="row justify-content-center mt-4">
<div class="col-md-8">
{% crispy form %}
</div>
</div>
JS:
document.addEventListener('DOMContentLoaded', function() {
// Show image preview before submitting
document.getElementById("id_image").onchange = function () {
var src = URL.createObjectURL(this.files[0]);
document.getElementById("image-preview").src = src;
}
})
and now for some reason the label disappears. I tried filling it while reading the image file in the js above but I failed.
Any help is appreciated.
Hi every one i have this piece of code:
$("input#fileBrowse").click();
$('#fileBrowse').change(function() {
if($('#fileBrowse').val() != "")
{
//AJAX call to send the file
}
else
{
return;
}
});
#fileBrowse is the id for the input file element, i trigger his event from code.
When someone insert rightly the file path, this code works properly. But if i press the close button in the input file dialog the code doesn't enter in the ELSE statement and send anyway the ajax call with an empty file name. Where's my problem?
<button class="nuovoButton" style="vertical-align:middle" onclick="displayDopdown();">
<span> Nuovo </span>
<div class="dropdown-content-nuovo" id="dropdown-content-nuovo">
<a style="border-bottom:none;" id="newFile" onclick="openFileOption();"> <img src="upload.png" class="a-image"> Carica File </a>
<input type="file" id="fileBrowse" style="display:none" >
<a onclick="createDirectory();"> <img src="create-new-folder.png" class="a-image"> Crea Cartella</a>
</div>
</button>
Here's the markup
I'm currently using Flask for my back-end coding, and working on my front-end as of now. Below are the images uploaded on the server. Now I need to edit those images, like I need to upload another image or change the existing image. We're using a cropper.js on this one, and I don't know how will I manage this one because I'm not that good when it comes to front-end scripting like javascript/jquery/ajax. Maximum images can upload is up to 8 images, I need to count the total existing images, then add another img src file, for example if I had 3 images, then I need to show 5 more img src file for adding new images. Any help will do and will be appreciated. Below is my code on HTML with Jinja2 template.
<div class="col-xs-3">
<label class="rs-thumb rs-thumb-cover">
<div class="rs-thumb-content" id="inputImage1-wrap"><img src="{{ resource.image_url }}" alt="" id="inputImage1-pic" width="100%"><i class="fa fa-picture-o"></i>
<span class="rs-cover">Cover</span>
</div>
</label>
</div>
{% for imgs in resource.images[1:] %}
<div class="col-xs-3">
<label class="rs-thumb rs-thumb-cover">
<div class="rs-thumb-content" id="inputImage1-wrap"><img src="{{ imgs.image }}" alt="" id="inputImage1-pic" width="100%"><i class="fa fa-picture-o"></i>
<!-- <span class="rs-cover">Cover</span> -->
</div>
</label>
</div>
{% endfor %}
Image for Edit Module on front-end
Html + JQuery solution, mostly tested so should work.
HTML
<div class="imgBox">
<!-- Your content will appear here -->
</div>
JQuery
// Get the amount of images on the current page
var amountOfImg = $("img").length;
var amountToCount = 8;
for (var i = 0; i < amountToCount - amountOfImg; i++) {
$(".imgBox").append("<input type='file' name='fileInput' /> <b id='removeImg'>Remove</b>")
}
$("#removeImg").click(function() {
// When the user clicks on the #removeImg text, find the closest "img" element and remove it.
$(this).closest("img").remove();
});
I read about it but still I'm not able to make it work.
I have an image (empty heart) that I would like to change to a different image (full heart) in order to indicate it was added to the wish list.
here is my code:
<tbody class="mainImgs">
<div ng-repeat="party in showtop5" ng-class=party.name>
<img ng-src="{{party.image}}">
<h2 id="title">{{party.title}}</h2>
<h3 id="description">{{party.description}}</h2>
<button href="#" class="imageClick" ng-click="click(party.title, party.description, party.image)">
<img ng-src="../images/emptyHeart.png" id="heart" click="myFunction(party.name, imageClick)">
</button>
<img ng-src="{{party.img}}" id="pace">
</div>
</tbody>
and my script:
function myFunction(myclass1, myclass2){
document.getElementByClass(myclass1).getElementByClass(myclass2).getElementById("heart").src = "../images/fullHeart.png";
}
what did I do wrong?
without sending the class - and trying to find image only by id - t works only for the first object heart that is printed
I think if its just about changing image then it can be handled pretty straight forward:
In html
<button href="#" class="imageClick" ng-click="click(party.title, party.description, party.image)">
<img ng-src="{{imgPath}}" id="heart" ng-click="myFunction(party.name, imageClick)">
</button>
In Controller:
$scope.imgPath = "../images/emptyHeart.png";
$scope.myFunction= function (name,imageClick){
// use promise to monitor the server response of adding product to Wishlist
("YOUR_PROMISE_CALL").then(
function(success){
$scope.imgPath = "../images/fullHeart.png"; // Bingo !!
},
function(error){
// take appropriate action
},
)
}
I am building a web app. I have to let a user upload a picture or drag-and-drop one into the browser. To help with this, I'm using dropzone.js. My challenge is, I need to customize the appearance a bit.
My customization requires features that seem pretty forward in dropzone.js. Basically, I need: only one file can be uploaded at once. While the file is being uploaded, I need to show a progress bar. Once uploaded, I need to let the user either a) remove the existing picture or b) replace the picture with another one. In an attempt to this, I currently have the following HTML:
<div id="myDropZone" style="cursor:pointer;">
<div class="files" id="previews">
<div id="template" class="file-row">
<ul class="list-inline">
<li>
<span class="preview" style="width:300px;"><img data-dz-thumbnail /></span>
<p class="size" data-dz-size></p>
</li>
<li style="vertical-align:top;">
<ul id="pictureActions" class="list-unstyled">
<li>
<button class="btn btn-default dz-clickable file-input-button">
<i class="glyphicon glyphicon-picture"></i>
<span>Pick...</span>
</button>
</li>
<li>
<button data-dz-remove class="btn btn-danger btn-block" style="margin-top:8px;">
<i class="glyphicon glyphicon-trash pull-left"></i>
<span>Delete</span>
</button>
</li>
</ul>
</li>
</ul>
<div id="uploadProgress" class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-warning" style="width:0%;" data-dz-uploadprogress>
<span>Please wait...</span>
</div>
</div>
</div>
</div>
<div id="uploadPrompt">Drag-and-drop a picture here</div>
</div>
I am initializing this code as a dropzone using the following JavaScript:
$(function () {
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var pictureDropZone = new Dropzone("div#myDropZone", {
url: "/pictures/upload",
clickable: true,
uploadMultiple: false,
autoProcessQueue: true,
previewTemplate: previewTemplate,
previewsContainer: "#previews",
init: function () {
this.on("complete", function (data) {
$('#pictureActions').show();
$('#uploadProgress').hide();
$('#uploadPrompt').hide();
});
},
uploadprogress: function (e, progress) {
$('#uploadProgress').css('width', progress);
},
removedfile: function () {
$('#previews').hide();
$('#uploadPrompt').show();
}
});
});
There are several problems though. If I click the text Drag-and-drop a picture here, the file picker does not open. If I click outside of the text, the file picker opens. Also, this code works for the initial process of choosing a file. However, if I click the "Pick..." button, the page does a post back. In reality, I was expecting the file picker to appear again. If I click the "Delete" button, and then choose a file again from the file picker, the picture, upload progress and action buttons never appear.
I feel like I'm screwing up the initialization of the dropzone somehow. What am I doing wrong? Why can't I choose another picture or delete a picture and choose another one or open the file picker if I click the prompt text?
I have changed your code
this.on("complete", function (data) {
$("#previews").show(); //This line added ... and it's worked...
$('#pictureActions').show();
$('#uploadProgress').hide();
$('#uploadPrompt').hide();
});
i think then line: $('#previews').hide(); you have hidden preview element, and this not change status when you append new image. :).
And this word but, You can see old picture you added, I think it's a new bug... I trying solute it... Have you idea for it.
http://jsfiddle.net/qek0xw1x/15/