I have a zip file containing some images, mp4s and a text file. The text file i am reading like so:
jszip
.loadAsync(arrayBuffer)
.then(({ files }) => {
const txtFiles = Object.entries(files).filter(([fileName]) =>
fileName.endsWith('.txt'),
);
if (!txtFiles.length) {
throw new Error('No txt files found in archive');
}
return txtFiles
.sort(([a], [b]) => a.length - b.length)[0][1]
.async('string');
})
and it works fine. But I need to get all the images/mp4s in the file as well, so I tried:
jszip
.loadAsync(arrayBuffer)
.then(({ files }) => {
const jpgs = [];
const mediaFiles = Object.entries(files).filter(([fileName]) =>
fileName.endsWith('.jpg'),
);
if (!mediaFiles.length) {
throw new Error('No media files found in archive');
}
mediaFiles.forEach(i => {
blob = new Blob([i], {
type: 'image/jpeg',
});
img = new Image();
img.src = URL.createObjectURL(blob);
jpgs.push(img);
});
return jpgs;
})
now when i try to render the jpgs array, i get a bunch of img elements like so:
<img alt="img" src="blob:http://localhost:3000/d64b16c7-aa9c-49a7-96cc-ed4eafc6a054">
but no images / broken image icons. What I am doing wrong?
Apparently I wasn't using the blob correctly, the following code solved it for me, with thanks to Loris Bettazza:
mediaFiles.forEach(([, image]) => {
image.async('blob').then(blob => {
const img = new Image();
img.src = URL.createObjectURL(blob);
document.body.prepend(img);
});
});
Related
I create a PDF in ReactJS using react-pdf/renderer and download it using file-saver.
Here is my code that creates the PDF and downloads it:
const LazyDownloadPDFButton = (number, date, totalHours, formattedHours) => (
<Button
className={classes.download}
onClick={
async () => {
const doc = <InvoicePDF number={number} date={date} totalHours={totalHours} formattedHours={formattedHours} />
const asPdf = pdf()
asPdf.updateContainer(doc)
const blob = await asPdf.toBlob()
saveAs(blob, `PDF${number}.pdf`)
}}>
Download
</Button>
)
where InvoicePDF is a separate component that renders the PDF pages with the necessary arguments, as in react-pdf/renderer documentation page.
Before download the actual PDF I have to merge it with another existing PDF that will be choose from computer drive. To do that I have the next code snippet:
fileRef = useRef()
<Button onClick={() => fileRef.current.click()}>
Upload file
<input
ref={fileRef}
type='file'
style={{ display: 'none' }}
/>
</Button>
Which returns me the details of the file.
I tried to updateContainer with this selected file, but there are errors.
How this new file should be merged with the InvoicePDF that is created?
In the meantime, I tried to create my last blob from arrayBuffers like this:
This is the function that concatenates the created PDF with the selected PDF and it returns the correct sum.
function concatArrayBuffers(buffer1, buffer2) {
if (!buffer1) {
return buffer2;
} else if (!buffer2) {
return buffer1;
}
var tmp = new Uint8Array(buffer1.byteLength + buffer2.byteLength);
tmp.set(new Uint8Array(buffer1), 0);
tmp.set(new Uint8Array(buffer2), buffer1.byteLength);
return tmp.buffer;
};
And my method now have a finalBlob that is created with arrayBuffers but the problem is that the resulted PDF will always contain just the content of the second arrayBuffer (which is either the selected pdf or the created pdf)
const LazyDownloadPDFButton = (number, date, totalHours, formattedHours) => (
<Button
className={classes.download}
onClick={
async () => {
const doc = <InvoicePDF number={number} date={date} totalHours={totalHours} formattedHours={formattedHours} />
const asPdf = pdf()
asPdf.updateContainer(doc)
const initialBlob = await new Blob([fileRef.current.files[0]], { type: 'application/pdf' }).arrayBuffer()
const blob = await (await asPdf.toBlob()).arrayBuffer()
const finalArrayBuffer = concatArrayBuffers(initialBlob, blob)
const finalBlob = new Blob([finalArrayBuffer], { type: 'application/pdf' })
saveAs(finalBlob, `PDF${number}.pdf`)
}}
>
Download
</Button>
)
Just A Simple Solution Made By me...
https://github.com/ManasMadan/pdf-actions
https://www.npmjs.com/package/pdf-actions
import { createPDF,pdfArrayToBlob, mergePDF } from "pdf-actions";
// Async Function To Merge PDF Files Uploaded Using The Input Tag in HTML
const mergePDFHandler = async (files) => {
// Converting File Object Array To PDF Document Array
files.forEach((file)=>await createPDF.PDFDocumentFromFile(file))
// Merging The PDF Files to A PDFDocument
const mergedPDFDocument = await mergePDF(files)
// Converting The Merged Document to Unit8Array
const mergedPdfFile = await mergedPDFDocument.save();
// Saving The File To Disk
const pdfBlob = pdfArrayToBlob(mergedPdfFile);
};
Solution
After some research and a lot of failed tries I came to an answer on how to merge the PDFs in the correct order, and bonus add an image (in my case a signature) on every page of the final PDF.
This is the final code:
function base64toBlob(base64Data, contentType) {
contentType = contentType || '';
var sliceSize = 1024;
var byteCharacters = atob(base64Data);
var bytesLength = byteCharacters.length;
var slicesCount = Math.ceil(bytesLength / sliceSize);
var byteArrays = new Array(slicesCount);
for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
var begin = sliceIndex * sliceSize;
var end = Math.min(begin + sliceSize, bytesLength);
var bytes = new Array(end - begin);
for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
bytes[i] = byteCharacters[offset].charCodeAt(0);
}
byteArrays[sliceIndex] = new Uint8Array(bytes);
}
return new Blob(byteArrays, { type: contentType });
}
async function mergeBetweenPDF(pdfFileList, number) {
const doc = await PDFDocument.create()
const getUserSignature = () => {
switch (selectedUser.id) {
case 1:
return FirstImage
case 2:
return SecondImage
default:
return null
}
}
const pngURL = getUserSignature()
const pngImageBytes = pngURL ? await fetch(pngURL).then((res) => res.arrayBuffer()) : null
const pngImage = pngURL ? await doc.embedPng(pngImageBytes) : null
const pngDims = pngURL ? pngImage.scale(0.5) : null
const initialPDF = await PDFDocument.load(pdfFileList[0])
const appendixPDF = await PDFDocument.load(pdfFileList[1])
const initialPDFPages = await doc.copyPages(initialPDF, initialPDF.getPageIndices())
for (const page of initialPDFPages) {
if (pngURL) {
page.drawImage(pngImage, {
x: page.getWidth() / 2 - pngDims.width / 2 + 75,
y: page.getHeight() / 2 - pngDims.height,
width: pngDims.width,
height: pngDims.height,
});
}
doc.addPage(page)
}
const appendixPDFPages = await doc.copyPages(appendixPDF, appendixPDF.getPageIndices())
for (const page of appendixPDFPages) {
if (pngURL) {
page.drawImage(pngImage, {
x: page.getWidth() / 2 - pngDims.width / 2 + 75,
y: page.getHeight() / 2 - pngDims.height,
width: pngDims.width,
height: pngDims.height,
});
}
doc.addPage(page)
}
const base64 = await doc.saveAsBase64()
const bufferArray = base64toBlob(base64, 'application/pdf')
const blob = new Blob([bufferArray], { type: 'application/pdf' })
saveAs(blob, `Appendix${number}.pdf`)
}
const LazyDownloadPDFButton = (number, date, totalHours, formattedHours) => (
<Button
className={classes.download}
onClick={
async () => {
const doc = <InvoicePDF number={number} date={date} totalHours={totalHours} formattedHours={formattedHours} />
const asPdf = pdf()
asPdf.updateContainer(doc)
let initialBlob = await new Blob([fileRef.current.files[0]], { type: 'application/pdf' }).arrayBuffer()
let appendixBlob = await (await asPdf.toBlob()).arrayBuffer()
mergeBetweenPDF([initialBlob, appendixBlob], number)
}}
>
Download
</Button>
)
So the LazyDownloadPDFButton is my button that request the respective parameters to create the final PDF. InvoicePDF is my created PDF with the parameters, and initialBlob is the PDF that I upload on my page, which requires to be the first in merged PDF, and appendixBlob is the created PDF that will be attached to initialBlob.
In mergeBetweenPDF I am using pdf-lib library to create the final document, where I create the image, take the 2 initial PDFs that are send, looping them, add the image on every page, and then add every page to the final doc which will be downloaded.
Hope one day this will help someone.
I have used the react-native-fs library to download image through my app. The download shows to be completed but still the image doesn't show up in the phone anywhere. The folder shows the modified date but no image over there.
The function that I am calling :
RNFS.downloadFile({
fromUrl: 'https://facebook.github.io/react-native/img/header_logo.png',
toFile: '${RNFS.DocumentDirectoryPath}/react-native-hello.png',
}).promise.then((r) => {
console.log("download done");
this.setState({ isDone: true })
});
Can anyone help me get though this ?
Try this code:
actualDownload = () => {
let url = 'https://facebook.github.io/react-native/img/header_logo.png'
let name = 'logo.png'
let dirs = RNFS.DocumentDirectoryPath/MyApp;
console.log("--path--",dirs)
const file_path = dirs +'/'+name
RNFS.readFile(url, 'base64')
.then(res =>{
this.setState({resBase64:res})
let base64 = this.state.resBase64
RNFS.writeFile(file_path,base64,'base64')
.catch((error) => {
console.log("err",error);
});
});
}
I will like to save an image from a web URL to the device can anyone help?
I've tried using the imageSource module but it only speaks of images from local device
const imageSourceModule = require("tns-core-modules/image-source");
const fileSystemModule = require("tns-core-modules/file-system");
imageSourceModule.fromUrl(webURL).then((res) => {
const folderDest = fileSystemModule.knownFolders.currentApp();
const pathDest = fileSystemModule.path.join(folderDest.path, "test.png");
const saved = res.saveToFile(pathDest, "png");
if (saved) {
console.log("Image saved successfully!");
this.image = imageSourceModule.fromFile(pathDest);
}
thanks to #Narendra Mongiya for the first answer which help get the image from url
This is what your code should be (I am assuming that your webURL returns jpg/png etc)
const imageSource = require('image-source');
imageSource.fromUrl(webURL).then((res: any) => {
this.imageUrl = res;
}).catch(err => {
this.imageUrl = this.getIconSource('default_image');
});
and in html file
<Image [src]="imageUrl" loadMode="async"></Image>
and for the default images if URL return blank
public getIconSource(icon: string): string {
return isAndroid ? `res://${icon}` : 'res://images/' + icon;
}
I'm trying to upload file to cloudinary. Here is part of my react component
...
addItem() {
...
let file = this.fileInput.value;
keywords !== "" && this.props.onAddItem(keywords, place, image);
...
}
render() {
return (
....
<Input
type="file"
innerRef={(input) => {this.fileInput = input}}
name="image"
id="image"
placeholder=""/>
)
}
Here is action file:
export function onAddItem(keywords, place, file, id, isChangebale = false) {
return (dispatch) => {
axios.all([
axios.post('https://api.cloudinary.com/v1_1/myservername/image/upload',
{upload_preset: "mypresetname", file: file}),
axios.post('http://localhost:3001/api/items/', { keywords, place, id, isChangebale })
])
.then(axios.spread((cloudinaryRes, localRes) => {
console.log(cloudinaryRes, localRes);
}))
I receive error xhr.js:178 POST https://api.cloudinary.com/v1_1/testovich/image/upload 400 (Bad Request) and in response headers "X-Cld-Error: Unsupported source URL: C:\fakepath\2017-12-07_19-06-445.png"
When I test using postman I have correct response.
So it looks like I do something wrong when pass file from rect component to action file. How to pass correct path/file to cloudinary?
There were two mistakes:
1. in react component there should be
let file = this.fileInput.files[0];//I upload only one file
instead of
let file = this.fileInput.value;
in action file
export function onAddItem(keywords, place, image, id, isChangebale = false) {
const formData = new FormData();
formData.append("file", image);
formData.append("upload_preset", "mypresetname");
return (dispatch) => {
axios.all([
// AJAX upload request using Axios )
axios.post('https://api.cloudinary.com/v1_1/myservername/image/upload',
formData,
instead of:
export function onAddItem(keywords, place, file, id, isChangebale = false) {
return (dispatch) => {
axios.all([
axios.post('https://api.cloudinary.com/v1_1/myservername/image/upload',
{upload_preset: "mypresetname", file: file}),
Convert the image to a base64 like const base64Img = data:image/jpg;base64,${file.data};
The file.data represents the data property from response from image picker.
Then I passed the base64Img to data like
return RNFetchBlob.fetch('POST', apiUrl, headerProps, [ { name: 'file', fileName: file.fileName, type: file.type, data: base64Img } ]);
Hope it helps.
I am using the package react-dropzone (https://github.com/okonet/react-dropzone) to get images from the user. The user uploads their image and everything is fine, but Im only getting something like "blob:http//blahblah" from it and I need the image to be in base64 png.
my dropzone component:
<Dropzone ref="dropzone" multiple={false} onDrop={this.onDrop.bind(this)} >
{this.state.files ?<img className="img-responsive" src={this.state.files[0].preview}></img>
: <div>Upload Photo</div> }
</Dropzone>
and the drop function that gets the blob url :
onDrop (files ) {
if ( files.length === 0 ) {
alert("upload img please")
return;
}
console.log('Received files: ', files);
this.setState({files:files})
var blobURL = files[0].preview
var reader = new FileReader();
reader.readAsDataURL(blobURL)
}
I would get an error :Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
I think it is because im trying to pass in an object-url that points to a blob, but where would I be able to get blob so I can convert to base64?
I would suggest to use a promise to get the result of async convertion by FileReader.readAsDataURL method. Here's the sample how it can be done:
const promise = new Promise((resolve, reject) => {
const reader = new FileReader()
reader.readAsDataURL(files[0])
reader.onload = () => {
if (!!reader.result) {
resolve(reader.result)
}
else {
reject(Error("Failed converting to base64"))
}
}
})
promise.then(result => {
// dispatch or do whatever you need with result
}, err => {
console.log(err)
})