I am trying to submit the file I am importing once I click OK on system's window for uploading files, but i don't know how to do it... This is what I've done so far:
<input type="file" id="file-input" style="display:none" />
<button class="btn pull-right" ng-click="submitCashierFile()">Import</button>
JS:
$scope.submitCashierFile = function () {
angular.element('#file-input').trigger('click');
// I should have something like this next i guess?
$scope.cashierfile.upload = Upload.upload({
url: config.baseAddress + 'test/uploadCashierExcel',
data: { file: $scope.cashierfile }
});
$scope.cashierfile.upload.then(function (response) {
$timeout(function () {
$scope.cashierfile.result = response.data;
toastService.success('You have added .xlsx');
});
}, function (response) {
toastService.error(response);
});
};
So I triger the click, open the modal to choose file, the problem for me is how to submit it on clicking OK in that modal. Any suggestions?
Your question is not clear to me, but I will give it a shot base on what I did understand.
You should map the control's onchange event. This will fire right after selecting the file to upload.
Then you should do the actual upload of the file.
When I need to do this task, I drop use of Angular and go for HTML5 file upload mechanism. That one is working as you describe...
Related
I am using Dropzone:
jQuery(function () {
let dropzone = jQuery("#upload-box")
dropzone.dropzone({
url: "/file/upload",
autoProcessQueue: false,
addedfile: function (file) {
console.log(file)
}
})
})
On added file I wan't to add it to an input <input type="file" name="file">. I know how to create to input but don't know how to add the file, so when I submit the whole form to get it in the $_FILES array on the server. #upload-box is div, not a form and that's why I want to add every file in <input type="file" name="file">.
I don't think that is possible. Please see this link: Set value of type="file" via jquery
I think you should upload files with ajax (xhr) asynchronously as they are dropped on the div.
I'm using dropzone.js to upload files to the server. I included the js and css files and the "drag zone" is within a modal window that opens on the click of a button (the modal includes more elements that are not relevant here)
The problem I'm facing is that, inside the modal dialogue the "add file" section does not get triggered. Nothing happens when clicking on it, neither am I able to drag and drop files.
I saw a similar problem in another thread, but the solutions provided there didn't work for me (here: Using Dropzone.js inside Bootstrap modal).
I have been looking for an answer for days with no luck. Any ideas will be welcome.
This is my code
CSHTML:
[...]
<div class="W100pc">
<div class="FormUnit W045pc AdjustedWidth">
<div id="DropzoneElement" class="dropzone">
<div class="dz-message">Add file here</div>
</div>
</div>
</div>
[...]
JS:
[...]
$(document).ready(function() {
Dropzone.autoDiscover = false;
//Simple Dropzonejs
$("#DropzoneElement").dropzone({
maxFilesize: 100,
url: window.doSomethingHere,
addRemoveLinks: true,
success: function(file, response) {
var imgName = response;
file.previewElement.classList.add("dz-success");
console.log("Successfully uploaded :" + imgName);
},
error: function(file, response) {
file.previewElement.classList.add("dz-error");
}
});
}
[...]
Thanks for your help.
You should subscribe to the shown.bs.modal event this event is fired when the modal has been made visible to the user. Initialize the Dropzone in this event.
$('#myModal').on('shown.bs.modal', function (e) {
// Initialize Dropzone
});
I want to upload a photo without hitting the having a submit button. I am using ionic framework and cordova plugin and the example below is getting a photo from the iphone's photo library.. for brevity i only included what's necessary for my request.
my view looks like this:
<form ng-submit="???">
<img class="img-circle" ng-src="{{prof_pic}}" ngclick="showActionsheet()" ng-if="pic_is_not_null()"/>
</form>
controller:
$scope.getPictureFromGallery = function() { $cordovaCamera.getPicture(secondoptions).then(function(imageData) {
$scope.imageData = imageData;
//data model
$scope.data = {prof_pic_link: imageData};
var image = angular.toJson($scope.data);
UserService.UpdateMyPhoto($localStorage.CurrentUser.id, $localStorage.CurrentUser.auth_token, image)
.success(function (data) {
$scope.prof_pic = "data:image/jpeg;base64," + imageData;
//to display the image in the view
}).
error(function(error,status) {
console.log(error);
console.log(status);
})
}, function(err) {
// error
});
};
You already have the answer in your question.
You can bind ng-click to a function that uploads the image to your server.
But more of a question is why you would not want the submit-button. Ponder this: The user whishes to upload an image, she selects an image that is to be uploaded but manages to select the wrong one.
If I read your scenario correctly, this will mean that the wrong image gets uploaded. If, on the other hand, there would be a submit-button the user can select a new image without the first one being uploaded.
So while you can do this, and you already have the answer yourself (ng-click="myUploadFunction(image)"), do you really want to?
I need to use an Image instead of using dropbox default chooser button. I have gone through their API docs and I couldn't find any such ways to use other elements for dropbox chooser. Can anyone provide me a solution for this?
Thanks in Advance.
This is actually quite easy. The documentation on https://www.dropbox.com/developers/dropins/chooser/js has a section called "Triggering the Chooser with JavaScript" that shows how to do it. Here's some not-really-tested code:
<img id="chooser-image" src="whatever.jpg" />
<script>
document.getElementById("chooser-image").onclick = function () {
Dropbox.choose({
linkType: "direct",
success: function (files) {
alert(files[0].link);
}
});
};
</script>
I've created a form with a button. If users click the button, browser will generate a popup for user to upload and crop a photo.
onclick="window.open('upload.php');"
if uploaded
window.opener.document.getElementById
the popup will return the cropped pic to the opener window (form)
document.getElementById("errMsg").innerHTML="<input type=\'button\'
onclick=\'window.close();\' value=\'Use this pic\'>";
Finally, the popup will generate a "Use this pic" button.
Now, I want to upgrade this popup to jQuery Dialog to make it polish. How can I do that?
http://jqueryui.com/demos/dialog/#default
Try Using a Modal Form in which you can call the dialog for user to upload & crop the image and on clicking Use this pic on the dialog; return to your page and continue your application.
Better performances, you can use Jquery Modal Form with lighbox for a better UI.
Cheers!!!
What is the problem?
Take upload.php's code (the stuff within the BODY element) and put it inside the caller page, within a DIV.
Then apply a dialog with jQuery on that DIV. Then just activate that dialog when needed.
Now, as for the code itself - I'm sure you need to re-wire a few things but the idea is very simple and I really don't understand why this question has a bounty of +100 reputation, really. Not that I mind having it haha!
I hope I got what exactly you're trying to achieve.
Here is jsfiddle example: http://jsfiddle.net/nNw33/3/
Here is the code:
$(document).ready(function () {
$('#initUpload').click(function (event) {
$('#Dialog').dialog();
setTimeout(function () {
// upload completes
$('#errMsg')
.html("<input type=\'button\' value=\'Use this pic\'>")
.click(function () {
$('#Dialog').dialog('close');
});
}, 1500);
});
});
HTML:
<input type="button" id="initUpload" value="Upload" />
<div id="Dialog" style="display: none">
Upload content here
<div id="errMsg"></div>
</div>
You should read this cute plugin, which allows you to upload files asynchroniously.
http://malsup.com/jquery/form/#options-object
Add following in body whereever on page it fits:
<button onclick="openPopup()">Show dialog</button>
<div id="modalFormDia"><!-- blank --></div>
Add following to head to load plugin. Nice example usage here
<script src="http://malsup.github.com/jquery.form.js"></script>
It works with a hidden iframe, submitting the results to your backend without opening any windows.
This way everything can be done in one 'window' or, lets make that the dialog popup youre probably looking for
Grab sample code from a fiddle here. Following code can be put anywhere as well, globally accessible
function onComplete(xhr) {
// Lets expect that the server sends back
// the URL pointing to uploaded image, an error if failed
if (xhr.responseText.match("error")) {
// failed
$("#feedback").html("Upload failed: " + xhr.responseText);
} else {
// uploaded
$("#feedback").html('Upload done <button>"LOVING IT, USE THIS"</button>').click(function() {
// image accepted, close dialog and set the image on main page
diaDom.dialog('close')
$('#targetOnPage') // ....
});
$('#preview').html('<img src="' + xhr.responseText + '" alt="Image preview loads here"/' + '>');
}
}
function openPopup() {
// get the dialog DOM node (if first time, create)
var diaDom = $('#modalFormDia')
diaDom.html('<form id="myForm" onsubmit="return false;" action="upload.php" method="post" enctype="multipart/form-data">' + '<input type="file" name="myfile"><br>' + '<input type="submit" value="Upload File to Server">' + '<hr/><div id="preview"></div><div id="feedback"></div>').dialog({
buttons: {
"Cancel": function() {
$(diaDom).dialog('close');
}
},
closeOnEscape: false,
autoOpen: true,
modal: true,
title: 'Image Uploader'
});
// setup form with hooks
$('#myForm').ajaxForm({
beforeSend: function() {
$('#feedback').html('Upload starting')
},
complete: onComplete
});
}