How to upload images with Rails-Api + Vue.js + Cloudinary + Attachinary? - vue.js

With server rendered rails apps I've always used cloudinary and attachinary to upload images and other files to a third party server and have them linked to my data models.
I am now increasingly using Vue.js with Rails-Api, and I'm wondering if I can still use Attachinary + Cloudinary, and how? What would be the simplest approach?

Cloudinary doesn't support an official Vue.js integration yet. You can try and implement the cloudinary-core package (pure js package) in your project.

Related

Can React Js application be hosted on S3 bucket

I thought we can only host Static websites onto S3 bucket.
How can React Js apps be hosted onto S3? React pages are dynamic in my understanding. The content of the page changes based on the user choices made on the page. Isn't that correct?
thank you
React pages are dynamic in my understanding.
Your definition of "dynamic" and S3's definition of "dynamic" are not the same thing.
Everything that's changing in the React application is happening in the browser. It's just the browser running JavaScript code. Nothing on S3 prevents a browser from running JavaScript code.
What they mean is that you can't have dynamic server-side content, such as a Node.js application or a PHP application.
The React application is served to the user by static HTML/JavaScript/CSS files.
React is a Single-page application (SPA) with browser -side rendering. A Single-page application (SPA) is a web application implementation that loads a web document and updates it by using JavaScript APIs in the browser. In simple terms, when a web application written in react works, the browser download the application files and run it using JavaScript on browser with the support of react libraries. Therfore the content in react app (min.js files and other assests in a production build) are not changing with time. A static storage and a public access(url) is the sufficiant to host a react application. So it can be host in a S3 bucket or github-pages or similar static storage without any computing power.
In a react webapp what's dynamic is the rendering of HTML elements using javascript. A dynamic web application refered by AWS is a one with dynamic server side rendering as Node.js. You can refer this guide to learn more on how to deploy a React application in Amazon S3.

Best practise to upload image to cloudinary in React Native?

What is the best method to upload image in a react native app to cloudinary API?. Should I install their SDK from https://www.npmjs.com/package/cloudinary and use it inside the app after installing. Wont it cause any problems after compiling to apk?
Or should I use the manual way? With the fetch api in react native and sent a post request to the cloudinary API? Isn't that a bit too much work and at the same time not so secure, because API keys are exposed right? Whats your opinion?
While the React Native SDK is currently unavailable, it is recommended to use the direct call to the upload Rest API as implemented at the client-side of your application (see sample implementation in React). And you could pass the Cloudinary account parameters from your server-side code to your frontend as an option to manage the credentials.

Vue + Element: viewer for .docx/.pptx/.pdf documents

The project I currently work on uses Vue.js and Element UI for the frontend.
We are building a system for managing documents with Django + DRF backend.
Users can upload their documents (mostly .docx/.pptx/.pdf formats) and also want to preview them. The major constraint for the application is no access to the Internet (it will work on the local network only) and, ideally, preview must happen on the frontend.
How can I achieve this? I've tried to search for libraries that can do this but to no success.

Can you run an Angular Universal application without a server?

There's a feature in Angular Universal that allows you to pre-render pages at build-time. Can this be used to pre-render all your pages and run Angular Universal without a server?
Once html pages have been pre-rendered using angular universal (using nodejs server or asp.net core server), you can use any CDN to serve the pre-generated html.
See https://universal.angular.io/overview/
Edit: have a look at the starer kit
https://github.com/angular/universal-starter
Basically, you can reuse the prerender.js file which will write the rendered html files (for specified static routes) to the dist/browser folder, or wherever you want to. This is that folder that you deploy to a static host after
Well, you're always going to need to have a server somewhere in the equation: the only question is how much you have to set it up yourself versus how much can the current crop of tools and technologies do it for you.
In this talk from Node Summit Steven Fluin from Google talks about Firebase at the end. Pay attention to the bit about 'cloud functions' (at about 20 mins). Your Angular app will be rendered on the server using Firebase cloud functions. When a user interacts with your app, some JS is run to figure out what to send down (from the Firebase server) to the user. "You don't need to set up a server at all; everything is running in Firebase."
I haven't used Firebase myself - I'm using Angular Universal, which has a Node.js server as you know - but this sounds very nice. I found setting up Angular Universal really tricky (but got there in the end).

fileupload and backbone.js + Rails

I managed to create a small app that uses backbone.js for CRUD process.
Now i am trying to include file upload as well in "Create". i m using "paperclip" to upload image. As i am learning about backbone.js please tell me some approach to making it?
You cannot do this with backbone models. You will have to create a form (including the file field) on the client side and post form to the server.
You can use something like that on the client:
http://www.williambharding.com/blog/rails/rails-ajax-image-uploading-made-simple-with-jquery/
You may want to check out the jquery.iframe.transport plugin. Since you're using rails 3, you can use remotipart instead (it bundles the iframe.transport plugin), which hooks into rails's ujs driver to automatically add support for file upload in ajax requests.