https://proto.school/#/mutable-file-system
I have gone through this link but don’t know how to do same thing in node.js
I have added 'hello' word into the IPFS network and its working fine and also i have used image to upload into ipfs but i want to know how can i create folder in ipfs network and upload images into that folder
So my problem is that how to create the folder and upload picture into that folder.
Here is my code.
const addFile = async () => {
//const Added = await ipfs.add('hello');
const fsReadImgData = fs.readFileSync('image1.jpg');
var ipfsSave = await ipfs.add({
path:image1.jpg,
content: fsReadImgData
});
return fsReadImgData;
}
const fileHash = await addFile();
First read file into a buffer (or replace with however you're getting the image data:
const imgdata = fs.readFileSync('/yourfile.jpg');
Regular IPFS files method (immutable, you do not expect to update these):
let added = await ipfs.add({
path: 'images/yourfile.jpg',
content: imgdata
}, { wrapWithDirectory: true })
Mutable filesystem method (you expect to update and change the files):
await ipfs.files.mkdir('/images')
await ipfs.files.write(
'/images/yourfile.jpg',
imgdata,
{create: true})
Related
I'm wondering if it's possible within puppeteer to access a FileSystemDirectoryHandle (from the File System Access API). I would like to pass in a directory path via puppeteer as though the user had selected a directory via window.showDirectoryPicker(). On my client page I use the File System Access API to write a series of png files taken from a canvas element, like:
const directoryHandle = await window.showDirectoryPicker();
for (let frame = 0; frame < totalFrames; frame++){
const fileHandle = await directoryHandle.getFileHandle(`${frame}.png`, { create: true });
const writable = await fileHandle.createWritable();
updateCanvas(); // <--- update the contents of my canvas element
const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
await writable.write(blob);
await writable.close();
}
On the puppeteer side, I want to mimic that behavior with something like:
const page = await browser.newPage();
await page.goto("localhost:3333/canvasRenderer.html");
// --- this part doesn't seem to exist ---
const [dirChooser] = await Promise.all([
page.waitForDirectoryChooser(),
page.click('#choose-directory'),
]);
await dirChooser.accept(['save/frames/here']);
//--------------------------------------
but waitForDirectoryChooser() doesn't exist.
I'd really appreciate any ideas or insights on how I might accomplish this!
I'm new to gulp. Trying to optimize the images and convert them into webp format. I was able to achieve that using gulp-webp. But it seems there are now two version of the images inside my dist/img folder one is the original and a webp version. So how do I get only the webp not the original one inside my dist/img folder?
Here how my project directories look like:
project
|-dist
|-css
|-img
|-js
|-src
|-css
|-img
|-js
gulp.js
...
Here is webp conversion function:
function webpImage() {
return src('dist/img/**/*.{jpg,png}')
.pipe(imagewebp())
.pipe(dest('dist/img'))
}
I would first say you should not delete source file, it is ok to keep them. What you want to do is having to different destinations. One of which should be deployed (the compiled, minified and webp for example) and the other should be version and used in your cdci pipelines perhaps.
But then, if you really want to remove the source file, you can use gulp-clean while being in a gulp script.
Your gulp clean script could look like that :
const { src, task } = require('gulp');
const clean = require("gulp-clean");
const logger = require('node-color-log');
function cleanImagesTask() {
const root = "path/to/images/you/want/to/delete";
logger.color('yellow').log(`Clean images`);
return src(root,{allowEmpty: true},{read: false}).pipe(clean({force:true}));
};
const cleanImagesFolder = task('clean:images', cleanImagesTask);
exports.cleanImagesFolder = cleanImagesFolder;
And if you want to deploy in a different dest, could use something similar to :
const { src, dest, task } = require( 'gulp' );
const logger = require('node-color-log');
function copyImagesToDest(callback) {
const imagesSource = "path/to/your/images/**/*";
const imagesDestination = "path/to/destination/";
logger.color('green').log(`Copy images from ${artifactData} to: ${destination}`);
return src(imagesSource)
.pipe(dest(destination))
.on('end', function () {
logger.color('green').log(`Copy to: ${destination}`);
callback();
});
};
const copyImages = task('copy:images', copyImagesToDest);
exports.copyImages = copyImages ;
I already have my method that compresses the content of the files with gulp-minify-css in a temporary folder which I hope to later delete with gulp if possible but I don't see how to replace the files first, I have:
var revReplace = require('gulp-rev-replace'); // -> this folder is not recognized
gulp.task('revrep', () => {
return gulp.src('app/Styles/CssArqMincss')
.pipe(gulp.dest('app/Content/CSSArq/'));
})
and how can I later delete the folder /Styles/CssArqMincss?
Thanks
To delete files from folder location, you can use this task and adapt it.
const { src, task } = require( 'gulp' );
const clean = require("gulp-clean");
const logger = require('node-color-log');
function cleanFolderTask() {
const yourPathRoot = "pathToYourFolder"; //I would recommend using config file to store paths, such as : config.path.artifact.root;
logger.color('yellow').log(`Cleaning ${yourPathRoot}`);
return src(yourPathRoot ,{allowEmpty: true},{read: false}).pipe(clean({force:true}));
};
const cleanFolderTask= task('clean:folder', cleanFolderTask);
exports.cleanFolderTask= cleanFolderTask;
To copy from one folder to another one, I would also use the previous task to first clean the destination and then :
const { src, dest, task } = require( 'gulp');
const logger = require('node-color-log');
function copyFilesTask(callback) {
let filesLoc = "path/to/your/files";
let filesDest = "path/to/destination"; // I would recommend using config file to store paths, such as : config.path.artifact.files and config.path.solution.files;
logger.color('yellow').log(`Copy ${filesDest }`);
src(`${filesLoc}/**/*`)
.pipe(dest(filesDest),
callback());
};
const copyFiles = task('copy:files', copyFilesTask);
exports.copyFiles = copyFiles;
So I have this file input where the user selects an image. But once I have this image, I want to change ONLY the name, so for example, user uploads "wallpaper_hd_dragonball_z.jpg" and I want it to be named "wallpaper.jpg". This is the input:
<input type="file" #change="uploadImage($event,userDetails.email)">
And this is the function it calls to store the image in the database:
uploadImage(e, email){
this.selectedFile = e.target.files[0];
console.log(this.selectedFile.name);
var storageRef = firebaseApp.storage().ref(`profilePics/${email}/${this.selectedFile.name}`);
const task = storageRef.put(this.selectedFile);
task.on('state_changed',snapshot=>{
let percentage = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
this.uploadValue = percentage;
}, error=>{console.log(error.message)},
()=>{this.uploadValue=100;
task.snapshot.ref.getDownloadURL().then((url)=>{
this.picture = url;
console.log(this.picture);
})
})
}
Basically what I'm trying is:
this.selectedFile.name = "profPic.jpg";
console.log(this.selectedFile.name);
But it doesn't work. I've looked around google and I can't find how to do it.
You don't have to change the name of the file you have in memory, because the name property of a File object is read-only.
Instead, just rename the file you will save in Firebase Storage.
function getFileExtension(fileName) {
return filename.split('.').pop();
}
//...
const fileExtension = getFileExtension(this.selectedFile.name);
var storageRef = firebaseApp.storage().ref(`profilePics/${email}/wallpaper.${fileExtension}`);
storageRef.put(this.selectedFile);
// ...
Or create a new file object, with another name.
const myNewFile = new File([this.selectedFile], 'wallpaper.png', {type: myFile.type});
firebaseApp.storage().ref(`profilePics/${email}/${myNewFile.name}`);
storageRef.put(myNewFile);
// ...
There are 4 distinct URL types;
Absolute http://www.example.com/images/icons.png
Document-Relative ../images/icons.png
Root-Relative /images/icons.png
Protocol-Relative //www.example.com/images/icons.png
I have a large static file site (html, css, js) which is built with Jigsaw. This framework takes PHP templates and compiles them into static HTML. I am also using Gulp tasks to compile assets (sass, js..etc).
Using Jigsaw's build process I can either have the site built with full Absolute paths/urls (http://example.com/path-to/page) or Root-Relative (/path-to/page).
This is great but now the client wants the site to use Document-Relative as they are now hosting the site in a subdirectory with a URL pointing to that subdirectory.
E.g. http://example.com would point to http://xx.server.com/hosted-files/directory
My issue is that Jigsaw doesn't allow for Document-Relative URLs. Is there a gulp/node script I can use to convert all references (image sources, links, css paths..etc)? Or is there another solution (e.g. using .htacccess)?
TLDR;
I need to replace any Absolute or Root-Relative references in multiple HTML files and directories with Document-Relative paths and URLs. Or is there another solution (e.g. using .htacccess)?
I have managed to solve my own issue with what I feel is a "hacky" fix.
I've basically created a custom gulp plugin replaces URLs/paths..etc with Document-Relative paths.
gulpfile.js - relative-urls task runs after all other tasks have completed.
const relative = require('./tasks/document-relative');
gulp.task('relative-urls', function() {
return gulp.src('build/**/*.html')
.pipe( relative({
directory: 'build',
url: 'http://localhost:8000',
}) )
.pipe( gulp.dest('build') );
});
./tasks/document-relative.js - plugin
'use strict';
const fs = require('fs');
const PluginError = require('plugin-error');
const through = require('through2');
const PLUGIN_NAME = 'document-relative';
let count = 0;
module.exports = function(options) {
// Remove slashes from beginning and end of string
const strip_slashes = (string) => {
return string ? string.replace(/^\/|\/$/g, '') : null;
}
// Users options object
options = options || {};
// Cleanup options
const base_dir = strip_slashes(options.directory);
const url = strip_slashes(options.url) + '/';
return through({
objectMode: true,
writable: true,
readable: true
},
function(file, enc, callback) {
count++;
// Check for null file
if (file.isNull()) {
return callback(null, file);
}
if (file.isStream()) {
this.emit('error', new PluginError(PLUGIN_NAME, 'Stream not supported!'));
return callback(null, file);
}
if (file.isBuffer()) {
// Get contents of this file
let html = file.contents.toString(enc);
// This files full path (/home/usr/project/build/page/example/index.html)
const path = file.path;
// Path task was run from (/home/usr/project/)
const cwd = file.cwd+( base_dir ? '/'+base_dir : '' );
// Project specific path (/page/example/index.html)
const relative = path.replace(cwd, '');
// Get array of directories ['page', 'example', 'index.html']
let paths = strip_slashes(relative).split('/');
// Remove last item ['page', 'example']
paths.pop();
// Add ../ for nth number of paths in array
let rel_path = paths.length === 0 ? '' : ('../'.repeat(paths.length));
// Replace dom attributes (e.g. href="/page/example")
html = html.replace( /(?:(?!="\/\/)="\/)/g, '="'+rel_path );
// Replace inline background (e.g. background: url('/image/something.jpg'))
html = html.replace( /url\(\'\//g, 'url(\''+rel_path );
html = html.replace( /url\('\//g, 'url(''+rel_path );
// If user defined URL, match and remove
if (url && url.length) {
html = html.replace( new RegExp(url, 'g'), rel_path );
}
// Overwrite file
fs.writeFileSync(file.path, html, {
encoding: enc,
flag:'w'
});
return callback();
}
});
};
This basically opens all .html files in my build folder, calculates how many paths deep each file is (/folder1/folder2/index.html) and replaces any instances of url (http://localhost:8000) with ../ repeated for the number of paths calculated.
Node has path.relative.
Read Levi Coles' own answer to understand where url and directory come from.
const path = require("path");
// create a regular expression from your url property.
const domain_expression = new RegExp(url);
// Once you have an offending 'href' you can do this.
// - Here 'href' is Absolute, but this same code would work
// with Root-Relative paths too.
const href = "http://localhost:8000/images/icons.png";
const file_index = href.lastIndexOf("/") + 1;
const file_component = href.substring(file_index);
const root_relative = href.replace(domain_expression, "");
const relative_href = path.relative(`${directory}/${root_relative}`, directory);
const _href = relative_href + file_component;
// _href = ../../icons.png