What are the key distinctions between DOCS and PSD base64 URLs?

My current challenge involves displaying a preview of attachments. I want to show an IMAGE SVG preview for image attachments and a PDF preview for PDF attachments, both based on their respective base64 formats. For example, I am currently using the split method for images:

v-else-if="(image.split('/')[1].split(';')[0]) === 'png' || 'jpeg' || 'jpg'"

However, when I attach DOCS and PSD files, all I see is:

data:application/octet-stream;base64,OEJQUwABAAAAA

Image Preview

I am struggling to differentiate between doc and PSD files in order to display a proper preview. Any suggestions would be greatly appreciated.

javascriptvue.jsbase64

Answer №1

base64 encoding does not inherently include the file name within the data. The extension of a file is typically derived from its name, which may not be present in the base64 content. In such cases, alternative methods must be used to extract the file name. One approach is to leverage an input[type=file] element, as described in more detail in this helpful answer.

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

Laravel is a powerful framework that allows developers to efficiently pass objects with private variables to Inertia

Just getting started with laravel using inertia My laravel version is 9.10.1, Inertia version is 0.11, and Vue is at 3.2 I've created a class called RefundManager class RefundManager { private int $id; private string $refund; public ...

laravelvue.jsdomain-driven-designinertiajsvue-props

How to efficiently update a nested array within the state of a React

Although the onChange function is working as expected, I am facing issues with updating the features in the state. Despite numerous attempts, I haven't been able to find examples similar to what I'm trying to achieve, so I decided to seek help. ...

javascriptreactjsarraysobjectstate

The page is having trouble loading images

My goal is to display sliding images in a web application using Bootstrap carousel. The images are fetched from the backend and stored in the 'images' state. Below is the JSON format of the data that is retrieved: images:[ { SNO:'1', NA ...

javascriptreactjsbootstrap-4

Incorporating an else statement into a function that handles AJAX calls upon receiving a response

My code is almost perfect, but there's just one issue. Whenever an invalid email is entered, the else statement in the PHP response makes it look like the form was still successful. How can I modify my current code to display the appropriate error mes ...

javascriptphpajax

Error: Collection2 validation did not pass: The field 'name' must be filled in, the field 'email' cannot be empty, and the field 'message' is mandatory

I need to set up a way for visitors to send messages through my website const mongoose = require("mongoose"); mongoose.connect("MongoDb-Connection-Uri") .then(() => { console.log("mongodb connected"); }) .catch(() => { console.log("fail ...

javascriptnode.jsmongodbexpressmongoose

Exploring advanced slot functionality in VuetifyJS through autocomplete integration with Google Places API

How can I make VuetifyJS advanced slots work seamlessly with the Google Places API? Currently, some addresses appear in the autocomplete dropdown only after clearing the input text by clicking the "x" icon in the form field. To see the problem in action, ...

javascriptvue.jsgoogle-places-apivuetify.jsgoogle-places

The function that can be used in Ajax for setting

I'm currently utilizing Ajax to automatically submit a form when a key is pressed. After the form is submitted, the page displays the resulting information success: function (response){ $("#search_results<?php echo $HoursID ?>").html(response) ...

javascriptajaxtimeout

Retrieving text data in Controller by utilizing jQuery AJAX request

Text box and button for input <input type="text" class="form-control" name="ClaimNumber" placeholder="Enter a claim number" id="ClaimNumber" /> <button class="btn btnNormal" type="submit" id="btnSearch"> ...

javascriptjqueryajaxasp.net-mvc

Arranging an array based on relationships between children and parents

I have an array of objects like this: const data = [{id: 3, name: ''}, {id: 4, name: ''}, {id: 5, name: '', parent: 3}, {id: 6, name: '', parent: 5}, {id: 7, name: '', parent: 4}, {id: 8, name: '&ap ...

javascriptvue.js

React testing with Mocha experiencing an Invariant violation

Currently, I am in the process of setting up a React project using Electron. Lately, I have been experimenting with configuring Mocha as my test framework. Everything seems to be working fine when I run: "test": "mocha -w --require babel-core/register ...

javascriptreactjsmocha.jsjsdom

Having trouble accessing data beyond the login page using Node/Express

Currently in an unusual situation. I am developing a backend and frontend that connects to a third-party RESTFUL API managing some hardware. The third-party API is hosted on your local system as a webserver, meaning HTTP requests are directed to "localhost ...

javascriptnode.jshttpexpress

You cannot use the router inside the Vuex store in VueJS framework

After removing the authentication data in my logout function, I would like to redirect the user to the home page. logout({commit}){ commit('clearAuthData') router.replace('/') I have also included my routes.js file like th ...

vue.jsvue-router

Completing a fetch promise and sending the outcome to a function that is not awaited

I have a function that retrieves data from a Postgresql database and returns it. The expected behavior is to fetch the data using the async function getCat(), process it in const Catalogue, and then return it to a ReactJS component. catalogue.tsx: import ...

javascriptreactjstypescriptexpressfetch

Error encountered: Multer does not recognize the field when attempting to upload multiple files in a node.js environment

I would like to upload two files in one request using Node.js and I am utilizing multer for this task. Here is my request in Postman: https://i.sstatic.net/8ZEno.png Additionally, I am using multer in routing: router.post( "/Create", Uploa ...

javascriptnode.jsmulter

JavaScript: Activate the element with the first class of its children

This code is a visual representation of what I'm trying to accomplish... <style> .red{background:red} .blue{background:blue} </style> <div id=test> <button>1</button> <button>2</button> </div> ...

javascripthtmlcssgetelementbyidclassname

Using inline CSS to apply conditional styles to a component in React is a great way to customize the

I'm currently working on customizing the styles of some buttons depending on their 'active' status and whether the user is hovering over them. So far, it's partially working but I'm encountering behavior that I can't fully com ...

javascriptcssreactjsmaterial-ui

Select the small image to reveal the larger overlay image

I have a grid of images and I want each image to expand into fullscreen when clicked. However, the JavaScript I am using is causing only the last image in the grid to overlay. How can I resolve this issue? Here is the code I am currently using: http://js ...

javascriptjqueryhtmlcssimage

Make the textarea larger and bring it to the forefront when it is selected

I would like to make a textarea expand (increase its height) when it is in focus. The expanded textarea should not push the content down, but rather be displayed above other content. Currently, this is the code I am using (check out the example here): $( ...

javascriptjquerytextareaz-index

Create an array of arrays within a loop using TypeScript

My application contains an object with dates and corresponding time arrays. The console log output is displayed below: 32: { 1514160000: Array [ 1200, 1500 ], 1514764800: Array [ 1200, 1500 ], 1515369600: Array [ 1200, 1500 ], 1515974400: Array [ 700, 12 ...

javascriptarraysangulartypescript

jQuery mobile menu: Scroll to content after closing the menu

I am currently working on a project where I am using mmenu for the first time. It's functioning as expected, but there is one particular issue that I would really like to have resolved. Here is the URL: What I am hoping to achieve is that when a men ...

javascriptjqueryhtmlmmenu