Tips for obtaining a file in its raw binary format

One of the challenges I'm facing is dealing with a file upload using antdUpload

The HTML code snippet for the uploader is as follows:

    <Upload
        beforeUpload={((file: RcFile, fileList: RcFile[]): boolean => {this.requestUpload(file, (fileList.length || 0 )); return false;})}
    ></Upload>

The function that handles the upload process is shown below:

requestUpload(file: RcFile, nbFile: number): void {
    const reader = new FileReader();
    reader.onload = (): void => {
        FileHelper.uploadFile({
            filename: file.name,
            filepath: `${this.props.datastoreId}/${this.props.itemId}/${this.props.fieldId}/${file.name}`,
            file: reader.result,
            field_id: this.props.fieldId,
            item_id: this.props.itemId || '',
            d_id: this.props.datastoreId || '',
            p_id: this.props.projectId || '',
            display_order: nbFile
        }).subscribe()
    };
    reader.readAsArrayBuffer(file);
}

My main challenge lies in obtaining raw binary data from the uploaded file. My API specifically requires raw binary data and nothing else. Unfortunately, most solutions online suggest methods like using base64 encoding, which doesn't suit my requirements. How can I convert `reader.result` into pure binary raw data?

I have researched various stack overflow threads without success. They provide alternative approaches but don't address how to achieve raw binary data when no other options are viable.

If you have any insights or suggestions on how I can accomplish this task, please share your thoughts. Thank you!

Answer №1

As per the guidance provided by the file-upload tool (ng-file-upload), it is recommended to start off by seeking assistance on StackOverflow with the 'ng-file-upload' tag. Therefore, ensure to include that specific tag in your post.

Upon scanning through the documentation using a search for "binary", the following code snippet is revealed:

Upload.http({
  url: '/server/upload/url',
  headers : {
    'Content-Type': file.type
  },
  data: file
})

The code suggests sending a file object as part of the data, and assigning the file type to the header content. Although I have not personally tested this yet...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to close a socket upon session expiration

I am currently working on a small express application that also incorporates a socket program. Everything works perfectly when a user successfully logs in - it creates the session and socket connection seamlessly. However, I encountered an issue where eve ...

Several jquery libraries are experiencing malfunctions

<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $(".slidingDiv").hide(); $(".show_hide").show().click ...

Karma is unable to locate the module within the specified relative path

I'm facing a challenge with Karma not being able to load a specific file. As a novice in Karma, I dedicated the entire day to researching and checking documentation for similar issues with no luck. Upon initiating the karma process, it encounters an ...

What is the best way to forward specific props from a parent to its children?

Currently, I am working on a React + Typescript architecture called "forward." The purpose of this architecture is to pass all props received down to its children components. However, I have encountered an issue where I want to restrict the type of props ...

Transforming dates in JavaScript

So I have a situation where I need to call php from javascript. The URL address is Jun 18 18:00:00 UTC+0200 in the year 2013, but that format is not suitable for my needs. I want to convert it to the format YYYY-MM-DD, either using JavaScript or PHP. An ...

The issue of React Js's inline style malfunctioning when using a loop condition

Having some trouble with setting different backgrounds for items in a loop in React JS. I attempted to use inline styles to make it dynamic, but no luck so far. Any tips or solutions? { main.map((item, index) => ( <a key={index} href=&apo ...

Transforming Django models into JSON format to be utilized as a JavaScript object

Looking to retrieve model data as an object in Javascript, I've been using the following approach in my Django view: var data = {{ data|safe }}; Here is how my view is set up: context = { 'data': { 'model1': serializ ...

What is the best way to incorporate a state parameter into a URL when making a GET request with Axios in ReactJS?

Currently, I am utilizing the axios library within a React application to fetch data from a Django backend. I have successfully retrieved user data and stored it in the component's state. However, I now require one of the attributes from the user_data ...

Using axios.spread() allows for caching of my API requests, a feature that is not available when

Thank you for taking the time to read this. I find myself in a peculiar situation where I am required to invoke multiple CMS API routes from my server to incorporate their response.data into an object that will later be transferred to the client side. The ...

Cookies store their values within the document.cookie framework

My cookie contains the following data: emailID=a1%40a.comSEPmaths=0SEPphysics=0SEPchemistry=0SEPbotany=0SEPzoology=0SEPta mil=0SEPenglish=0SEPpolity=0SEPgk=0SEPhistory=0 However, when I use document.cookie.split('; '), it returns the encoded ve ...

typescript error indicating a missing property that is expected to exist

I am struggling to comprehend the reason behind this error message. Property 'message' does not exist on type '{ username: string; } | { message: string; }'. The following is a snippet of the relevant code: // types.ts type LoginMess ...

Page freezing due to JQuery scroll event

I successfully implemented a trigger that checks if an element is within the visible viewport and added it to the scroll event. While this works smoothly on some pages, I noticed that on larger pages it causes the page to freeze. In Firefox, I experienced ...

Why does the Node.js REST API keep throwing errors after I try to create just one record?

I encountered a back end issue recently. I have developed a simple API with just a post endpoint. The intention is to post data using the req.body. Oddly enough, it works perfectly fine the first time but when I attempt it again, I receive an error message ...

What is the best way to utilize derived types in TypeScript?

Given object A: interface A { boolProp: boolean, stringProp: string, numberProp: number, ...other props/methods... } Now, I need objects that contain one of the properties from A and set a default value for it, with other properties being irre ...

The Angular 2 http request for a POST method is not initiating

Utilizing Angular 2, I have successfully implemented a get request function. However, when attempting to make a post request, I am unable to detect any sign of the request in the Firebug Net panel. The code for these methods is as follows. Furthermore, th ...

streaming an HTML5 video directly from memory source

After retrieving multiple encrypted data using ajax queries and performing necessary manipulations to turn them into a valid video, I find myself at a standstill. The binary of the video is now stored in memory, but I am unsure how to display it. To confi ...

The Protractor tool (node:9208) threw an UnhandledPromiseRejectionWarning due to an ElementNotVisibleError, indicating that the element is not interactable. Despite this

I am attempting to interact with an element using protractor but encountering the following error (node:9208) UnhandledPromiseRejectionWarning: ElementNotVisibleError: element not interactable (Session information: chrome=69.0.3497.92) (Driver informa ...

Deliver the PDF generated document to Django Rest API

I have successfully created a PDF from an HTML file, Now, I am looking to automatically email the PDF as soon as it is generated. To achieve this, I need to send it to Django REST for backend processing. However, I am facing difficulties in figuring out h ...

Utilizing ng-repeat, ng-grid, and ng-click in Angular: A comprehensive guide

I'm encountering an issue with populating a table using ng-repeat after a cellTemplate ng-click. cellTemplate: '<div ng-click="foo()" ng-bind="row.getProperty(col.field)"></div>' Within this foo method, I am tryi ...

Error message: NodeJS express unknown function or method get()

Currently, I am facing an issue while working with express and Pug (Jade) to render a page as the get() function is returning as undefined along with warnings... I followed these steps: npm install express --save npm install pug --save Here's a sn ...