I want to upload list of images from a folder and stored them as bytestream in database. I want to give angularjs the folder containing the images instead of selecting multiple files . The part of the code responsible is given below.
$scope.uploadMultipleQuestions = function(e) {
var questionList = []
var difficultyLevel = vm.question.difficultyLevel;
var theFiles = e.files;
for (var i = 0; i < theFiles.length; i++) {
var ques = {};
ques.questionString = theFiles[i].name;
DataUtils.toBase64(theFiles[i], function(base64Data) {
$scope.$apply(function() {
ques.questionImage = base64Data;
});
[![enter image description here][1]][1]
});
ques.questionImageContentType = theFiles[i].type;
ques.questionString = theFiles[i].webkitRelativePath.split("/")[1];
questionList.push(ques);
Question.uploadMultipleQuestions(questionList);
}
for (var i = 0; i < questionList.length; i++) {
console.log(questionList[i]);
}
//Question.uploadMultipleQuestions(questionList);
}
But the problem is I am getting the following details in my log.(Screenshot attached below)
As you can see only the last object contains image data whereas none of the others have any image content.
Let me know why this problem is coming and how to solve the same.
It take a while to convert image to base64, so you have to upload your image after ques.questionImage is filled.
var uploadMultipleQuestions = function(files, i, output) {
if (files.length == i) {
for(var j=0;j<output.length;j++)
console.log(output[j]);
return Question.uploadMultipleQuestions(output);
}
DataUtils.toBase64(files[i], function(base64Data) {
output.push({
questionString: files[i].name,
questionImageContentType: files[i].type,
questionString: files[i].webkitRelativePath.split("/")[1],
questionImage: base64Data
});
uploadMultipleQuestions(files, i+1, output);
});
}
$scope.uploadMultipleQuestions =function(e){
var theFiles = e.files;
uploadMultipleQuestions(theFiles, 0, []);
}
Related
I am trying to extract a jpg image from a pdf file. Please take a look at a reproducible example:
https://codepen.io/thomas-kertsalis/pen/YzpYwYo?editors=1111
window.objs=[];
pdfjsLib.getDocument(sURL).promise
.then(pdf => {
for(var i=1;i<(pdf.numPages+1);i++){
pdf.getPage(i).then(function(page) {
page.getOperatorList().then(function (ops) {
for (var i=0; i < ops.fnArray.length; i++) {
let currentElement=ops.argsArray[i];
if(ops.fnArray[i] == pdfjsLib.OPS.paintImageXObject) {
window.objs.push(ops.argsArray[i][0])
let imageName=ops.argsArray[i][0];
page.objs.get(imageName, function(img) {
const content = img.data;
var newB64 = btoa(content);
document.getElementById("my-img").src =
'data:image/png;base64,'+newB64;
}
}
}
}
}
}
}
I have created an upload function that puts the uploaded data in an zip file (with jszip) which works perfectly fine. But when i try to add the content of the files that are uploaded to the jszip folder they are just empty.
Through printing out the array that I want to add the console I saw that for some reason there is no data in the array when it is used in the for loop.
var files = filesToRead;
var fragmente_name = [];
for (var i = 0, f; f = files[i]; i++) {
fragmente_name.push(f.name);
}
console.log(fragmente_inhalt);
for(var i = 0; i < fragmente_name.length; i++) {
console.log(fragmente_inhalt[i]);
if(element == "ambeth_script_upload") {
script_attachments.file(fragmente_name[i], fragmente_inhalt[i]);
} else if(element == "folder_upload") {
watcher_folder.file(fragmente_name[i], fragmente_inhalt[i]);
}
}
I'm working on a React application and would like to setState to photo sources before uploading. I'm trying to do it with this function here:
const getImagesHandler = () => {
let fileinput = document.getElementById("file-input");
let files = fileinput.files;
let photos = [];
let i = 0;
for(i=0; i<files.length;i++){
photos.push(files[i].SOURCE??);
}
this.setState({Photos: photos)
}
const getImagesHandler = () => {
let photos = [];
var fi = document.getElementById('file-input'); // GET THE FILE INPUT.
// VALIDATE OR CHECK IF ANY FILE IS SELECTED.
if (fi.files.length > 0) {
// RUN A LOOP TO CHECK EACH SELECTED FILE.
for (var i = 0; i <= fi.files.length - 1; i++) {
console.log(fi.files.item(i));
photos.push(fi.files.item(i));
}
}
this.setState({ Photos: photos})
In this W3schools example, console.log on the input element reveals a FileInput object:
FileList {0: File, 1: File, length: 2}
How can I work with this? The example demonstrates accessing the file, but every time a user selects new files, the old files disappear. How can I create a new empty FileList and copy it over, so that a user can add more files to the FileList?
I tried this, but it results in two FileList objects, rather than one FileList with all the files:
var fileStore = x.files;
function myFunction(){
var txt = "";
if ('files' in x) {
if (x.files.length == 0) {
txt = "Select one or more files.";
} else {
fileStore += x.files;
console.log(x.files);
console.log(fileStore);
Untested, but this should work
var fileStore = [];
function myFunction(){
var txt = "";
if ('files' in x) {
if (x.files.length == 0) {
txt = "Select one or more files.";
} else {
fileStore.push.apply(fileStore,x.files);
console.log(x.files);
console.log(fileStore);
More on Function::apply
More on Array::push
It is not possible to add File objects to FileList. You can use FormData to append Files to a single object.
var data = new FormData();
document.querySelector("input[type=file]")
.addEventListener("change", function(event) {
for (var i = 0, files = event.target.files; i < files.length; i++) {
data.append("file-" + [...data.keys()].length, files[i], files[i].name)
}
})
An array is fine for holding onto the File instances, but FormData is better if you want to upload them somewhere. If you want to log out or view the FormData, turning it into a Map is an option. Keep in mind that FormData is iterable.
var formData = new FormData();
var index = 0;
function onDrop(event)
{
var dt = event.dataTransfer;
var files = dt.files;
var count = files.length;
output("File Count: " + count + "\n");
for (var i = 0; i < files.length; i++) {
formData.append(files[i].name, files[i]);
}
}
function output(text)
{
document.getElementById("output").textContent += text;
console.dir(new Map(formData));
}
See this JSBin.
it is possible to add files using the datatransfer class
export const makeFileList = files => {
const reducer = (dataTransfer, file) => {
dataTransfer.items.add(file);
return dataTransfer;
}
return files.reduce(reducer, new DataTransfer()).files;
}
I'm hacking together a little Dropbox image slideshow. I use the Dropbox Public folder to share the index.html file which looks in the 'img' folder for a bunch of images to create slides.
I do this with the following, it's hacky but works
var findFiles = function(slideLimit){
var limit = slideLimit;
var img = [];
for(var i = 1; i < limit; i++){
var src = "<li class='slide slide-"+i+"'><img src='img/"+i+".png' onerror='imgError(this);''></li>"
$('.frame ul').append(src);
}
}
That works great, but I'd like to provide a solution that doesn't rely on the user having to use .png.
I was hoping omitting the extension would work on Dropbox but turns out no:
var src = "<li class='slide slide-"+i+"'><img src='img/"+i+"' onerror='imgError(this);''></li>"
I've been racking my brains, ideally I'd like
if( mimeType = png)
i + '.png'
else if (mimeType = gif)
i + '.gif'
etc
Bit stuck for solutions. Anyone got any good ideas? Might require me taking different a different direction...
Best way, make the users tell you the extension
var findFiles = function(slideLimit, ext){
var limit = slideLimit,
img = [],
lis = [];
ext = ext || "png";
for (var i = 1; i < limit; i++) {
lis.push("<li class='slide slide-"+i+"'><img src='img/"+i+"."+ext+"' onerror='imgError(this);''></li>");
}
$('.frame ul').append(lis.join(""));
}
Ping the server for the file, downside it takes time to keep hitting the server to see if the file it there
var findFiles = function(slideLimit){
var limit = slideLimit,
img = [],
lis = [],
extList = ["png","gif"];
function testExt () {
var ext = extList.shift();
if (ext) {
var img = new Image();
img.onload = function () {
load(ext);
};
img.onerror = testExt;
img.src="img/1." + ext;
}
}
function load (ext){
for (var i = 1; i < limit; i++) {
lis.push("<li class='slide slide-"+i+"'><img src='img/"+i+"."+ext+"' onerror='imgError(this);''></li>");
}
$('.frame ul').append(lis.join(""));
}
testExt();
}
[note both code snipplets are untested, wrote them here in the editor]