Display blob as doc file React - reactjs

I am looking for a solution to display doc file in React app. I am using react-docx library to create a file I need and the documentation says we can do whatever we want with the binary file created. Anyway it shows only examples to save it on computer. What I wanna do is to make this blob tyle file display in a browser as doc. I wanted to use preview-docx library for that but it has very poor documentation and I am not sure if that would be a solution. Anyway there is another library like react-doc-viewer but it accepts only strings for document we want to display. Maybe anyone would know if it is even possible to display binary type files?
Packer.toBlob(doc).then((blob) => {
// instead of save as I want to display the file
saveAs(blob, "example.docx");
});

Related

How to display a spreadsheet/csv file in a website with react

I am trying to display a spreadsheet or a CSV file on a website using react.js
The files are uploaded on the website and I just want to display the files inputted to the website. I have tried the popular meduim.com solution but it does not work for me, and it does not do exactly what I'm looking for.
I am not aware of the contents of the file which is uploaded to the website, but I just want to display whatever is uploaded to the website.
EDIT: If you want to parse xls file, you will 100% need a library. I've made a uploader that take excel before and parsing a xls file yourself is just a non starter. Look into this one.
There are many different library that you can use to do this but if you want to do this yourself, you can parse the csv into an array of array, then use map to create html element.
return (
<table>
csvArray.map(row => {
return <tr><td>row[0]</td></tr>
})
</table>
)

Convert video file to byte array and save within app

I am trying save some video in react native app privately. So that i can download videos within app and can watch within app after download. So i am not able to get it how can i do this. Let me know if anybody have resolution for this approach. i was checking that we can convert files into byte than can store within react native app. again then convert into video and can watch it within app. Let me know if this can be done by anyone. Thanks
<Video source={{uri: "background"}}
ref={(ref) => {
this.player = ref
}}
onBuffer={this.onBuffer}
onError={this.videoError}
style={styles.backgroundVideo} />
Watch this video
You can watch the above video. Anybody have a idea that how mx doing this thing. I want to do same. Download videos and save and will be private and play in my app.
For downloading any file like video,img ..
there are two best known libraries for downloading files
https://www.npmjs.com/package/react-native-fs
https://www.npmjs.com/package/react-native-fetch-blob
Now you can follow their documentation to download files like Videos,images or whatever you want to your user's phone.
For the part that you dont want it to be available to user via gallery.
For this you can use react-native-fetchblob as it has builtin intent actions and views. You can download a video file with any random name like 1234CACHE any random name without any extension to it, specially dont give it extension like video.mp4 because gallery detects .mp4 files so dont give it any extension and the file won't be available in any gallery.
Now how to hide the file? react-native-fetch-blob allow us to save files into directories that are not publicly available i mean user cannot reach those directory and these directories are used only for saving App's data so you can save your video file in one of these directories.
Now after completing your download, You can open your file with the Intent.
Example:
const VIDEO_PATH = res.path() //the path where your downloaded video is saved, you will actually receive this in the response of download function.
const MIME_TYPE = "video/mp4"
//Now finally call the intent with video mime so the video will be opened in user's media player, or if you want your own media player you can use any library for that.
android.actionViewIntent(VIDEO_PATH , MIME_TYPE)
you can use https://github.com/RonRadtke/react-native-blob-util to download any remote files

creating a document with react-docx using uploaded .docx file

So I have a simple, single-page React app. I want to be able to let users drop an MS Word (.docx) file onto a dropzone and then let them download an edited version of their file.
I got the dropzone working and now can access the files in my JS code, and I'm trying to use react-docx to edit the document. It seems that this is a React version of docx.js. However, I only see ways to create brand new documents, not any way to "load in" old ones for editing.
I don't want to start a document from scratch. Is there any way to make a new document using the file that is uploaded?
Anyone is appreciated who has expertise on this or just has a completely better idea for how to achieve my goal.

dart: How to save a file?

I need to save the file that is on my hard drive.
File address: /home/mk/proj1/1.txt
Program address: /home/mk/proj2/
I try to save:
new dom.AnchorElement(href: '/home/mk/proj1/1.txt')
..setAttribute("download", '1.txt')
..click();
Displays information about saving, but writes: Failed! No file.
How to save a file?
There is not really a way to save a file in the browser (except perhaps limited support for temporary files)
You can search for JavaScript solutions. They will be quite similar for Dart in the browser.
For example JavaScript: Create and save file
If you want to store a file on the client machine, you can provide a download link.
See also How to force a Download File prompt instead of displaying it in-browser with HTML?
To provide a download link for data that is available in the browser clients code instead of a server file, you can use a data url.
See also https://stackoverflow.com/a/29691487/217408

Converting Blob object to html in google app

I have stored user uploaded document (.doc ,.pdf) as a Blob object into data-store.
Instead of allowing user to download the document, I would like to present it as an HTML page
for viewing the doc. how do I convert Blob into HTML ? does google app engine provides any ready made API for the same?
There is no ready made API in AppEngine to convert .doc or .pdf (or or other types of) files to HTML. You would need to find a library for your preferred language to parse the blob file into its parts structured as an object model (like a DOM). Then you would need to write code to convert individual parts of the object model to HTML, unless you are lucky enough to find another library. And no, StackOverflow is not a good place to ask "what library is there...".
No. AppEngine itself does not provide any file format conversion tools. You might want to look into Google Drive API, which might, to some extent, do the format conversion for you.
You can have embed a PDF reader on a web page by using pdf.js.
Most browsers already have a built-in PDF viewer. If you provide a link to a PDF file, when users click on it, many browsers will automatically display the document. Those browsers that do not support this option, will offer a user to download the file to their hard-drive.
This is the easiest solution - you don't have to do anything at all.

Resources