We Keep Coding

Vue js not rendering image with base64 or binary data from Express API response

My Vue js component receives images via express API call as base64 or raw binary data, but it does not display (render) it.
I can see the image data in the variable given to img src, but for some reason it never renders it, only showing the "broken image icon".
Screenshot of broken image icon
This is the frontend component layout:
<img src="srcimg" v-if="srcimg">
The data mounted and watch functions call the async getsrcimg function which makes the Express API call:
data () {
return {
srcimg: null,
...
mounted () {
if (this.name) {
this.getsrcimg(this.name)
}
},
watch: {
name: function () {
if (this.name) {
this.getsrcimg(this.name)
}
}
},
And the function that receives the image via api:
async getsrcimg (name) {
try {
var getImgRes = await axios.post('http://localhost:5000/get_img?img_path=' + name)
const { data } = getImgRes
this.srcimg = 'data:image/png;base64,' + data
} catch (err) {
console.log(err)
this.message = err.response.data.error
}
}
The server backend function:
app.post('/get_img', (req, res) => {
var img_path = __dirname + req.query.img_path
var fs = require('fs');
const bitmap = fs.readFileSync(img_path);
const base64 = new Buffer.from(bitmap).toString("base64");
res.send(base64); // Send base64 instead of the raw file binary
});
I can see in the console log, as well as display the this.srcimg data available in this format:
data:image/png;base64,77+9UE5HDQoaCg...
But still, the HTML img element does not display the image.
I know the image is being sent correctly because I can see it in the browser inspect Network response preview so it probably is an issue within Vue frontend.
I have also tried to send the image raw binary data from server using res.sendFile and then loading it in the frontend using:
const blob = new Blob([data], {type: 'image/png'})
var imgName = 'image_name_example'
var file = new File([blob], imgName, { type: 'image/png' })
let reader = new FileReader()
reader.readAsDataURL(file)
reader.addEventListener('load', this.processReaderIMG, false)
...
processReaderIMG: function (readerData) {
this.srcimg = readerData.target.result
}
This also gives me the image data but the img element does not display it still.
Any help would be much much appreciated!

If this really is your frontend component:
<img src="srcimg" v-if="srcimg" />
, it attempts to render "srcimg", the actual string, instead of the contents of the reactive variable named srcimg.
And "srcimg" is not a valid source. It's not a url and it's not binary data.
You probably want to use :src instead of src:
<img :src="srcimg" v-if="srcimg" />
, shorthand for
<img v-bind:src="srcimg" v-if="srcimg" />
Docs: v-bind.
If the above is not the issue, test that the binary data is valid (manually).
Other possible causes:
the binary data might contain line breaks which break the HTML (highly improbable, but worth a check)
the response has a different encoding than your page
the response is already prefixed with 'data:image/png;base64,'
If everything fails, perhaps you could share the exact response of the server. There has to be something wrong with it, which you're missing.

Using pdf.js to render a PDF but it doesn't work and I don't get any error messages to help me debug the issue

I'm trying to build a Flask app where I upload pdf's and I'm working on previewing them before submitting to the back-end.
The script I'm using is as follows:
const imageUploadValidation = (function () {
"use strict";
pdfjsLib.GlobalWorkerOptions.workerSrc =
"https://mozilla.github.io/pdf.js/build/pdf.js";
const onFilePicked = function (event) {
// Select file Nodelist containing 1 file
const files = event.target.files;
const filename = files[0].name;
if (filename.lastIndexOf(".") <= 0) {
return alert("Please add a valid file!");
}
const fileReader = new FileReader();
fileReader.onload = function (e) {
const pdfData = e.target.result;
let loadingTask = pdfjsLib.getDocument({ data: pdfData })
loadingTask.promise.then(function (pdf) {
console.log("PDF loaded", pdf);
pdf.getPage(1).then((page) => {
console.log("page loaded", page);
// var scale = 1.5;
// var viewport = page.getViewport({ scale: scale });
var iframe = document.getElementById("image-preview");
iframe.src = page
// var context = canvas.getContext("2d");
// canvas.height = viewport.height;
// canvas.width = viewport.width;
// var renderContext = {
// canvasContext: context,
// viewport: viewport,
// };
// var renderTask = page.render(renderContext);
// renderTask.promise.then(function () {
// console.log("Page rendered");
// });
});
})
.catch((error) => {
console.log(error);
});
};
const pdf = fileReader.readAsArrayBuffer(files[0]);
console.log("read as Data URL", pdf);
};
const Constructor = function (selector) {
const publicAPI = {};
const changeHandler = (e) => {
// console.log(e)
onFilePicked(e);
};
publicAPI.init = function (selector) {
// Check for errors.
const fileInput = document.querySelector(selector);
if (!selector || typeof selector !== "string") {
throw new Error("Please provide a valid selector");
}
fileInput.addEventListener("change", changeHandler);
};
publicAPI.init(selector);
return publicAPI;
};
return Constructor;
})();
imageUploadValidation("form input[type=file]");
The loading task promise never seems to run. Everything seems to work up until that point. I'm not familiar with this Promise syntax, so I can't be sure if the problem is there or how I'm passing in the pdf file.
P.S. The commented out code is the original way I had this setup, what
s uncommented was just me testing a different way.

Check Datatype
First you might want to check what your getting back from your FileReader, specifically what is the datatype for pdfData. If you have a look at the documentation (direct link) getDocument is expecting a Unit8Array or a binary string.
Add Missing Parameters
The next problem you have is your missing required parameters in your call to getDocument. Here is the minimum required arguments:
var args = {
url: 'https://example.com/the-pdf-to-load.pdf',
cMapUrl: "./cmaps/",
cMapPacked: true,
}
I have never used the data argument in place of the url but as long as you supply the correct datatype you should be fine. Notice that cMapUrl should be a relative or absolute path to the cmap folder. PDFJS often needs these files to actually interpret a PDF file. Here are all the files from the demo repository (GitHub pages): cmaps You'll need to add these to your project.
Instead of using data I would recommend uploading your files as blobs and then all you have to do is supply the blob URL as url. I am not familiar with how to do that, I just know its possible in modern browsers.
Where Is Your Viewer / You Don't Need iFrame or Canvas
PDFJS just needs a div to place the PDF inside of. It's picky about some of the CSS rules, for exmaple it MUST be positioned absolute, otherwise PDFJS generates the pages as 0px height.
I don't see PDFViewer or PDFLinkService in your code. It looks like you are trying to build the entire viewer from scratch yourself. This is no small endeavor. When you get loadingTask working correctly the response should be handled something like this:
loadingTask.promise.then(
// Success function.
function( doc ) {
// viewer is holding: new pdfjsViewer.PDFViewer()
// linkService is: new pdfjsViewer.PDFLinkService()
viewer.setDocument( doc );
linkService.setDocument( doc );
},
// Error function.
function( exception ) {
// What type of error occurred?
if ( exception.name == 'PasswordException' ) {
// Password missing, prompt the user and try again.
elem.appendChild( getPdfPasswordBox() );
} else {
// Some other error, stop trying to load this PDF.
console.error( exception );
}
/**
* Additional exceptions can be reversed engineered from here:
* https://github.com/mozilla/pdf.js/blob/master/examples/mobile-viewer/viewer.js
*/
}
);
Notice that PDFViewer does all the hard work for you. PDFLinkService is needed if you want links in the PDF to work. You really should checkout the live demo and the example files.
Its a lot of work but these example files specifically can teach you all you need to know about PDFJS.
Example / Sample Code
Here is some sample code from a project I did with PDFJS. The code is a bit advanced but it should help you reverse engineer how PDFJS is working under the hood a bit better.
pdfObj = An object to store all the info and objects for this PDF file. I load multiple PDFs on a single page so I need this to keep them separate from each other.
updatePageInfo = My custome function that is called by PDFJS's eventBus when the user changes pages in the PDF; this happens as they scroll from page to page.
pdfjsViewer.DownloadManager = I allow users to download the PDFs so I need to use this.
pdfjsViewer.EventBus = Handles events like loading, page changing, and so on for the PDF. I am not 100% certain but I think the PDFViewer requires this.
pdfjsViewer.PDFViewer = What handles actually showing your PDF to users. container is the element on the page to render in, remember it must be positioned absolute.
// Create a new PDF object for this PDF.
var pdfObj = {
'container': elem.querySelector('.pdf-view-wrapper'),
'document': null,
'download': new pdfjsViewer.DownloadManager(),
'eventBus': new pdfjsViewer.EventBus(),
'history': null,
'id': id,
'linkService': null,
'loaded': 0,
'loader': null,
'pageTotal': 0,
'src': elem.dataset.pdf,
'timeoutCount': 0,
'viewer': null
};
// Update the eventBus to dispatch page change events to our own function.
pdfObj.eventBus.on( 'pagechanging', function pagechange(evt) {
updatePageInfo( evt );
} );
// Create and attach the PDFLinkService that handles links and navigation in the viewer.
var linkService = new pdfjsViewer.PDFLinkService( {
'eventBus': pdfObj.eventBus,
'externalLinkEnabled': true,
'externalLinkRel': 'noopener noreferrer nofollow',
'externalLinkTarget': 2 // Blank
} );
pdfObj.linkService = linkService;
// Create the actual PDFViewer that shows the PDF to the user.
var pdfViewer = new pdfjsViewer.PDFViewer(
{
'container': pdfObj.container,
'enableScripting': false, // Block embeded scripts for security
'enableWebGL': true,
'eventBus': pdfObj.eventBus,
'linkService': pdfObj.linkService,
'renderInteractiveForms': true, // Allow form fields to be editable
'textLayerMode': 2
}
);
pdfObj.viewer = pdfViewer;
pdfObj.linkService.setViewer( pdfObj.viewer );

file input files not read onChange on mobile

I'm building a puzzle app in React that allows the user to upload their own puzzles. This works fine on the web (the user clicks the input's label and it opens a dialog. When the user picks a file the onChange event is triggered), but on mobile, or at least on Chrome on Android, the files are not read...
This is where the input is declared:
<div className="file-input-wrapper">
<label for="puzzleUpload" className="button-dark">Upload Puzzle(s)</label>
<input type="file"
accept="application/json"
multiple
id="puzzleUpload"
onChange={handleFiles}/>
</div>
and this is the handleFiles() method
// when a file is uploaded, this checks to see that it's the right type, then adds it to the puzzle list
const handleFiles = () => {
var selectedFiles = document.getElementById('puzzleUpload').files;
// checks if the JSON is a valid puzzle
const validPuzzle = (puzzle) => {
let keys = ["name", "entitySetID", "logic", "size"];
return keys.every((key) => {return puzzle.hasOwnProperty(key)});
};
const onLoad = (event) => {
let puzzle = JSON.parse(event.target.result);
if(validPuzzle(puzzle)) {
appendPuzzleList(puzzle);
}
else {
console.log("JSON file does not contain a properly formatted Logike puzzle")
}
};
//checks the file type before attempting to read it
for (let i = 0; i < selectedFiles.length; i++) {
if(selectedFiles[i].type === 'application/json') {
//creates new readers so that it can read many files sequentially.
var reader = new FileReader();
reader.onload = onLoad;
reader.readAsText(selectedFiles[i]);
}
}
};
A working prototype with the most recent code can be found at http://logike.confusedretriever.com and it's possible to quickly write compatible JSON using the builder in the app.
I've been looking up solutions for the past hour and a half and have come up empty handed, so any help would be greatly appreciated! I read the FileReader docs, and everything seems to be supported, so I'm kind of stumped.
Interestingly, the file IS selected (you can see the filename in the ugly default version of the input once it's selected, but I hide it via CSS), so I'm tempted to implement a mobile-only button to trigger the event, if there isn't a more legit solution...

Chrome uses the OS's list of known MIME Types.
I guess Android doesn't know about "application/json", and at least, doesn't map the .json extension to this MIME type, this means that when you upload your File in this browser, you won't have the correct type property set, instead, it is set to the empty string ("").
But anyway, you shouldn't trust this type property, ever.
So you could always avoid some generic types, like image/*, video/*, but the only reliable way to know if it was a valid JSON file or not will be by actually reading the data contained in your file.
But I understand you don't want to start this operation if your user provides a huge file, like a video.
One simple solution might be to check the size property instead, if you know in which range your generated files might come.
One less simple but not so hard either solution would be to prepend a magic number (a.k.a File Signature)to your generated files (if your app is the only way to handle these files).
Then you would just have to check this magic number only before going to read the whole file:
// some magic-number (here "•MJS")
const MAGIC_NB = new Uint8Array([226, 128, 162, 77, 74, 83]);
// creates a json-like File, with our magic_nb prepended
function generateFile(data) {
const str = JSON.stringify(data);
const blob = new Blob([MAGIC_NB, str], {
type: 'application/myjson' // won't be used anyway
});
return new File([blob], 'my_file.json');
}
// checks whether the provided blob starts with our magic numbers or not
function checkFile(blob) {
return new Promise((res, rej) => {
const reader = new FileReader();
reader.onload = e => {
const arr = new Uint8Array(reader.result);
res(!arr.some((v, i) => MAGIC_NB[i] !== v));
};
reader.onerror = rej;
// read only the length of our magic nb
reader.readAsArrayBuffer(blob.slice(0, MAGIC_NB.length));
});
}
function handleFile(file) {
return checkFile(file).then(isValid => {
if (isValid) {
return readFile(file);
} else {
throw new Error('invalid file');
}
});
}
function readFile(file) {
return new Promise((res, rej) => {
const reader = new FileReader();
reader.onload = e => res(JSON.parse(reader.result));
reader.onerror = rej;
// don't read the magic_nb part again
reader.readAsText(file.slice(MAGIC_NB.length));
});
}
const my_file = generateFile({
key: 'value'
});
handleFile(my_file)
.then(obj => console.log(obj))
.catch(console.error);
And in the same way note that all browsers won't accept all the schemes for the accept attribute, and that you might want to double your MIME notation with a simple extension one (anyway even MIMEs are checked only against this extension).

How to Zip files using jszip library

Am working on an offline application using HTML5 and jquery for mobile. i want to back up files from the local storage using jszip. below is a code snippet of what i have done...
if (localStorageKeys.length > 0) {
for (var i = 0; i < localStorageKeys.length; i++) {
var key = localStorageKeys[i];
if (key.search(_instrumentId) != -1) {
var data = localStorage.getItem(localStorageKeys[i])
var zip = new JSZip();
zip.file(localStorageKeys[i] + ".txt", data);
var datafile = document.getElementById('backupData');
datafile.download = "DataFiles.zip";
datafile.href = window.URL.createObjectURL(zip.generate({ type: "blob" }));
}
else {
}
}
}
in the code above am looping through the localstorage content and saving ezch file in a text format. the challenge that am facing is how to create several text files inside DataFiles.zip as currently am only able to create one text file inside the zipped folder. Am new to javascript so bare with any ambiguity in my question.
thanks in advance.

Just keep calling zip.file().
Look at the example from their documentation page (comments mine):
var zip = new JSZip();
// Add a text file with the contents "Hello World\n"
zip.file("Hello.txt", "Hello World\n");
// Add a another text file with the contents "Goodbye, cruel world\n"
zip.file("Goodbye.txt", "Goodbye, cruel world\n");
// Add a folder named "images"
var img = zip.folder("images");
// Add a file named "smile.gif" to that folder, from some Base64 data
img.file("smile.gif", imgData, {base64: true});
zip.generateAsync({type:"base64"}).then(function (content) {
location.href="data:application/zip;base64," + content;
});
The important thing is to understand the code you've written - learn what each line does. If you do this, you'd realize that you just need to call zip.file() again to add another file.

Adding to #Jonathon Reinhart answer,
You could also set both file name and path at the same time
// create a file and a folder
zip.file("nested/hello.txt", "Hello World\n");
// same as
zip.folder("nested").file("hello.txt", "Hello World\n");

If you receive a list of files ( from ui or array or whatever ) you can make a compress before and then archive. The code is something like this:
function upload(files){
var zip = new JSZip();
let archive = zip.folder("test");
files.map(function(file){
files.file(file.name, file.raw, {base64: true});
}.bind(this));
return archive.generateAsync({
type: "blob",
compression: "DEFLATE",
compressionOptions: {
level: 6
}
}).then(function(content){
// send to server or whatever operation
});
}
this worked for me at multiple json files. Maybe it helps.

In case you want to zip files and need a base64 output, you can use the below code-
import * as JSZip from 'jszip'
var zip = new JSZip();
zip.file("Hello.json", this.fileContent);
zip.generateAsync({ type: "base64" }).then(function (content) {
const base64Data = content

Upload file from Javascript to Google Cloud Endpoint

I'm creating a web app using only HTML5 + Javascript + jQueryMobile and I wanted to upload a file to a Google App Engine web application using a Google Cloud Endpoint, also created by me.
As I control both sides, I can (and want to) create the simplest interaction possible.
As for the Endpoint, I thought of creating a method like this:
#ApiMethod(
name = "uploadFile",
path = "upload_file",
httpMethod = HttpMethod.POST
)
public void uploadFile(File file) {
//process the file
}
This File class could contain a field fileData of type Blob, or byte[] or something like that, repersenting the file data... Something like:
public class File {
private String fileName;
private long fileSize;
private Blob fileData;
//getters and setters
}
So the first question would be: what's the most suitable type for this field fileData?
And, taking into account the type selected for the field, how could I create the necessary POST request for that endpoint method form Javascript/jQuery?
Basically I need to create a POST request to http://myappid.appspot.com/_ah/api/files/v1/upload_file adding the File object in the POST data.
Note: I'm sorry I haven't tried anything for the Javascript code because I'm not familiar at all with this technologies, so I'd appreciate any help...

Edit: The answer below targes python version of AppEngine
It is a common demand with no clear solution. Till now, gae-init-upload is a demonstration of how you can achieve that with AppEngine and CoffeeScript. Worth having a look, CoffeeScript is being compiled into JavaScript in case you are not familiar.
The JavaScript solution you are looking for is under
/main/static/src/coffee/common/upload.coffee

I eventually used this code in my AMD Javascript application. I'm sorry I cannot explain it too much because I've written a big amount of code since I wrote this project, and as you can see I didn't comment the code properly (fail!!), anyway maybe you can get some ideas...
Note that there's something about getting navigator position because I wanted to store the location where the file was uploaded from, but it's not necessary at all!
Controller.js
uploadFile: function(request, render) {
var self = this;
var file = $("#file").get(0).files[0];
var reader = new FileReader();
reader.onload = function (evt) {
var upload = {
provider: self.folder.provider,
folderIdentifier: self.folder.id,
fileName: file.name,
fileSize: file.size,
base64Data: btoa(evt.target.result),
location: {
latitude: self.position.coords.latitude,
longitude: self.position.coords.longitude
}
}
var uploadFilePromise = self.connector.uploadFile(self.sessionToken.token, upload);
uploadFilePromise.done(function (file) {
render("file", {
result: "DONE",
file: file
});
});
uploadFilePromise.fail(function (error) {
render("file", {
result: "FAIL"
});
});
}
navigator.geolocation.getCurrentPosition(function(position) {
self.position = position;
reader.readAsBinaryString(file);
});
}
Connector.js
uploadFile: function (sessionToken, upload) {
var self = this;
var promise = new Promise();
gapi.client.load('upload', 'v1', function() {
var request = gapi.client.upload.uploadFile({
session_token: sessionToken,
resource: upload
});
request.execute(function(response) {
if (response.error) {
promise.reject(response.error);
}
else {
var file = File.create(response.result.provider,
response.result.type,
response.result.identifier,
response.result.name,
response.result.description,
response.result.created,
response.result.size,
response.result.link,
{
latitude: response.result.location.latitude,
longitude: response.result.location.longitude
});
promise.resolve(file);
}
});
}, self.api);
return promise;
}
Endpoint.java
#Api(name="upload")
public class UploadEndpoint {
#ApiMethod(
name = "uploadFile",
path = "upload_file",
httpMethod = HttpMethod.POST
)
public File uploadFile (
#Named("session_token") String token,
Upload upload) throws InternalServerErrorException {
File file = new UploadController().uploadFile(token, upload);
return file;
}
}