Guide to retrieving and editing images from Appwrite using Vue

Currently, I am utilizing a View frontend to retrieve a PDF file from Appwrite Storage. My goal is to acquire the PDF, insert additional text onto it, and then save it to the user's local device.

Below is the code I have so far - although I can receive the response, I am unsure about how to access or modify it before downloading it for the user:


const promiseFile = storage.getFileView(
                "[BUCKET ID]",
                "[FILE ID]"
            )

console.log(promiseFile)

Answer №1

AppWrite offers a solution to help you reach your goal, but it requires a different approach.

The Method

  1. To start, you must create a function within the AppWrite engine.

  2. In this function, you can utilize Node, PHP, Dart, Python, or other languages to implement the necessary logic for PDF manipulation.

  3. Upon completion of the function, provide a download link (details at the end) to the Vue instance.

  4. Within your Vue application, direct the user to the download link containing the appropriate headers for file downloading enforcement.

Accessing Files Directly To obtain a direct URL to a file, AppWrite provides two SDK methods that grant users immediate access.

download - To generate a download link, construct a link as shown below:

https://your-app-write/v1/storage/buckets/[BUCKET]/files/[FILE]/download?project=[PROJECT_ID]

view - To generate a viewable (direct access) link, use the following format:

https://your-app-write/v1/storage/buckets/[BUCKET]/files/[FILE]/download?project=[PROJECT_ID]

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

uncovering the secrets of tree shaking when using an npm package in conjunction with webpack

Imagine having an npm package where all components are exported from a single index.js file: export * from './components/A'; export * from './components/B'; Now consider another package that relies on this initial package: import {A} ...

Unlocking ajax components using django

Currently, I am utilizing AJAX to retrieve Django model data and display the results. In my views.py file: def browse_jobs(request): keyword = request.GET.get('keyword', None) company = Company.objects.filter(title__icontains=keyword) ...

Loop through each HTML element and store it in a JavaScript array

I currently have a webpage with 3 select buttons named "Season". I am trying to figure out which buttons are selected and receive their values as an array on my webpage. Below is the code I am using: var season_array = $.each($(form).children("input.sele ...

Comparing jQuery's min-width and width properties: A guide on eliminating pixels

Exploring some basic jQuery and JavaScript here. When I use the .width() method, I get an integer value. However, when I use .css('min-width'), it returns a value in pixels which makes it challenging to perform calculations. What would be the be ...

The onChange function in React JS for a Material UI 'number' TextField retains the previous value

In this element, I have an onChange function: <TextField id="rowinput" type="number" defaultValue={this.defaultRows} // defaultRows = 1 inputProps={{ min: "1", max:"5"}} onChange= ...

Navigating with Node.js: Understanding how to showcase the response data within a list structure

I am brand new to working with node.js and I'm looking to display the data I receive as a response on my webpage. Currently, I can see the output in my console. Is there a way to show this data on my actual page? GET Request: app.get('/bestell_ ...

Access the latest data within Sails' Waterline prior to the update process

When using Sails' Waterline, I am tasked with comparing the previous value to the new one and assigning a new attribute based on certain conditions. For instance: beforeUpdate: function(newValues, callback) { if(/* currentValues */.age > newVal ...

Unable to display Bootstrap 5 modal

I am currently in the process of constructing a basic webpage that includes a navigation bar and a table. The table rows are being dynamically generated through a simple JavaScript script that fetches data asynchronously from a database. I opted to utilize ...

unable to render a vector layer in openlayers 6

Currently, I am facing an issue with displaying a vector layer on an openlayers map using the source of local geojson and gpx files in my Vuejs project. Unfortunately, even when testing outside of Vue.js, the vector layer is not being displayed. Here is t ...

Challenges with dynamically adding rows using jQuery

I am trying to create a dynamic form that allows users to select a project and then populates tasks based on the selected project from a database query. The user can then enter hours for each task, which are updated based on the project id and task id comb ...

Combining Two Collections in Mongoose using Node.js

As a beginner in MEAN Stack, I am currently working on a Node Js application. I have created two collections: var personSchema = Schema({ _id: Number, name: String, age: Number, stories: { type: Array, ref: 'Story' } }); va ...

Tips for Creating JavaScript Code for HTML Helpers in ASP.NET MVC

My HTML helper includes a textBox that looks like this: @Html.TextBox("txt1") <br /> I am interested in triggering a javascript onchange event on this textbox. Can this be accomplished, or would it be better to use an HTML input type instead? ...

The synchronization issue between ng-class and animation

I'm experiencing a strange issue with ng-class and suspect that it may be related to a race condition. Here is the example on Plunker: example Below is the relevant JavaScript code: self.slideLeft = function() { if (self.end_index < se ...

Group the elements of the second array based on the repeated values of the first array and combine them into a single string

I have a challenge with two arrays and a string shown below var str=offer?; var names = [channelId, channelId, offerType, offerType, Language]; var values =[647, 763, international, programming, English]; Both arrays are the same size. I want to creat ...

Hiding a div with Javascript when the Excel dialog box is loaded

I have a piece of JavaScript code that is activated when the user clicks on an excel image. $("#excel").on("click", function () { $('#revealSpinningWheel').reveal(); $(window).load(function () { $('#revealSpinningWheel').hide ...

The utilization of conditional expression necessitates the inclusion of all three expressions at the conclusion

<div *ngFor="let f of layout?.photoframes; let i = index" [attr.data-index]="i"> <input type="number" [(ngModel)]="f.x" [style.border-color]="(selectedObject===f) ? 'red'" /> </div> An error is triggered by the conditional ...

AngularJS showing up as normal text

I can't seem to get angular JS working properly on my website. It keeps displaying as plain text in the browser and doesn't receive any information from the app2.js. I've double-checked all the dependencies and their locations in my code, so ...

Guide to eliminating the clearable icon in the Vuetify file input

I am struggling to find any props to deactivate the clearable icon. Additionally, there doesn't seem to be an event related to this issue. Is there a method available to eliminate the clearable icon? <v-file-input ref="profilePictureFileInput" ...

The automated test locator in Angular using Protractor is failing to function

I am facing a challenge with my angular web application as there are some elements that are difficult to interact with. One specific element is a checkbox that needs to be checked during testing: ` <div class="row form-group approval_label"> < ...

Getting the most out of your weather API: optimizing search parameters for precise location results and avoiding any confusion with similar locations

When experimenting with new platforms, I often utilize the openweathermap.org's api. However, I have encountered a recurring issue where I struggle to define a precise query for finding certain cities. The api functions smoothly for major cities like ...