Puppeteer file upload with webkitdirectory - node.js

I have written a page with a form which has a file input field with webkitdirectory. Now I am trying to test it with Puppeteer. There appears to be a uploadFile('path/to/file') method which I was hoping would also accept directories. Unfortunately, it doesn't seem to do so.
This is the line in the test file:
await input.uploadFile('/path/to/directory')
When on the nodejs side I print the file (which is handled with formidable) I get this output:
File {
_events: [Object: null prototype] {},
_eventsCount: 0,
_maxListeners: undefined,
size: 0,
path:
'/tmp/uploads-dir--aohyI0/upload_9f55c1ec641fac3902faccf665cfac35',
name: '',
type: 'application/octet-stream',
hash: null,
lastModifiedDate: null,
_writeStream: null }
However when I manually upload the directory with chrome by hand I get this:
File {
_events: [Object: null prototype] {},
_eventsCount: 0,
_maxListeners: undefined,
size: 0,
path:
'/tmp/uploads-dir--dbCZZG/upload_ec20a6ffc079a3cba92d8114b7418527',
name:
'path/to/myfile.txt',
type: 'application/octet-stream',
hash: null,
lastModifiedDate: null,
_writeStream: null }
As you can see the name is blank on the first one and I do not receive any actual files.
Is there any way to test forms with webkitdirectory with Puppeteer?

Related

How to differentiate folders from files in storage.getFiles() response?

This is what I have in my bucket:
images/
image1.jpeg
I'm using the storage.bucket().getFiles() method:
const images = await storage.bucket().getFiles({ prefix: 'images' });
console.log(images);
And this is the response I'm getting:
You can see that I get 2 items.
1 for the images folder itself
And 1 for the actual image1.jpeg file
[
[
File {
_events: [Object: null prototype] {},
_eventsCount: 0,
_maxListeners: undefined,
metadata: [Object],
baseUrl: '/o',
parent: [Bucket],
id: 'images%2F',
createMethod: undefined,
methods: [Object],
interceptors: [],
projectId: undefined,
create: undefined,
bucket: [Bucket],
storage: [Storage],
kmsKeyName: undefined,
userProject: undefined,
name: 'images/',
acl: [Acl],
instanceRetryValue: true,
instancePreconditionOpts: undefined,
[Symbol(kCapture)]: false
},
File {
_events: [Object: null prototype] {},
_eventsCount: 0,
_maxListeners: undefined,
metadata: [Object],
baseUrl: '/o',
parent: [Bucket],
id: 'images%2Fimage1.jpeg',
createMethod: undefined,
methods: [Object],
interceptors: [],
projectId: undefined,
create: undefined,
bucket: [Bucket],
storage: [Storage],
kmsKeyName: undefined,
userProject: undefined,
name: 'images/image1.jpeg',
acl: [Acl],
instanceRetryValue: true,
instancePreconditionOpts: undefined,
[Symbol(kCapture)]: false
}
]
]
I would like to loop over the files in images[0] and be able to differentiate the folder from the files. How can I do it?
Tried this on live data in this document
with { prefix: 'images' } the entire bucket under the prefix is returned.
with { prefix: 'images/' } the entire folder under the prefix is returned.
with { prefix: 'images/image'} restrict the results to only the "files" in the given "folder"
If you want to list only files in the given folder try changing the prefix like this:
const images = await storage.bucket().getFiles({ prefix: 'images/image' });

How do I execute a node js file on MacOS?

I've started the tutorial for Node.JS on tutorialspoint, but I can't get past the first step: https://www.tutorialspoint.com/nodejs/nodejs_first_application.htm
I us MacOS 10.13.5
I've created the following js file, named main.js.
var http = require("http");
http.createServer(function (request, response) {
// Send the HTTP header
// HTTP Status: 200 : OK
// Content Type: text/plain
response.writeHead(200, {'Content-Type': 'text/plain'});
// Send the response body as "Hello World"
response.end('Hello World\n');
}).listen(8081);
// Console will print the message
console.log('Server running at http://127.0.0.1:8081/');
It's a copy-paste of the tutorial, but when I try to run the given command node main.js nothing happens.
When I write the code directly in the node CLI I get the following response:
Server {
domain:
Domain {
domain: null,
_events: { error: [Function: debugDomainError] },
_eventsCount: 1,
_maxListeners: undefined,
members: [] },
_events:
{ request: [Function],
connection: [Function: connectionListener] },
_eventsCount: 2,
_maxListeners: undefined,
_connections: 0,
_handle:
TCP {
reading: false,
owner: [Circular],
onread: null,
onconnection: [Function: onconnection],
writeQueueSize: 0 },
_usingSlaves: false,
_slaves: [],
_unref: false,
allowHalfOpen: true,
pauseOnConnect: false,
httpAllowHalfOpen: false,
timeout: 120000,
keepAliveTimeout: 5000,
_pendingResponseData: 0,
maxHeadersCount: null,
_connectionKey: '6::::8081',
[Symbol(asyncId)]: 192 }
Edit:
The first time I tried writing it in the command line I misspelled response. I fixed it now and now I get the above response.
Edit 2
Here's what happens in the terminal. I included ls so you can see that it contains the file I'm trying to call
After running ps -a | grep node I saw I already had a process running. After I killed it I was able to execute my file.

How to inspect network traffic and get the URL of resource requests?

I want to monitor the network of a page and get all the URLs of the JavaScript network events, similar to what PhantomJS' page.onResourceRequested is doing, but I couldn't figure it out how to do this with Google Chrome's Puppeteer.
I've been dabbling with Google Chrome's puppeteer, but I couldn't figure out how to make it work, as the output of it looks like this:
Page {
domain: null,
_events: {
request: [Function]
},
_eventsCount: 1,
_maxListeners: undefined,
_client: Session {
domain: null,
_events: {
'Page.frameAttached': [Function],
'Page.frameNavigated': [Function],
'Page.frameDetached': [Function],
'Runtime.executionContextCreated': [Function],
'Network.requestWillBeSent': [Function: bound _onRequestWillBeSent],
'Network.requestIntercepted': [Function: bound _onRequestIntercepted],
'Network.responseReceived': [Function: bound _onResponseReceived],
'Network.loadingFinished': [Function: bound _onLoadingFinished],
'Network.loadingFailed': [Function: bound _onLoadingFailed],
'Page.loadEventFired': [Function],
'Runtime.consoleAPICalled': [Function],
'Page.javascriptDialogOpening': [Function],
'Runtime.exceptionThrown': [Function],
'Security.certificateError': [Function],
'Inspector.targetCrashed': [Function]
},
_eventsCount: 15,
_maxListeners: undefined,
_lastId: 14,
_callbacks: Map {},
_connection: Connection {
domain: null,
_events: {},
_eventsCount: 0,
_maxListeners: undefined,
_url: 'ws://127.0.0.1:65343/devtools/browser/ca214df4-4357-4b8f-8552-a1524d6652ff',
_lastId: 17,
_callbacks: Map {},
_delay: 0,
_ws: [Object],
_sessions: [Object]
},
_targetId: 'bbd35bf4-d3ce-4497-a2a0-8cc98b4f0923',
_sessionId: 'bbd35bf4-d3ce-4497-a2a0-8cc98b4f0923:1'
},
_keyboard: Keyboard {
_client: Session {
domain: null,
_events: [Object],
_eventsCount: 15,
_maxListeners: undefined,
_lastId: 14,
_callbacks: Map {},
_connection: [Object],
_targetId: 'bbd35bf4-d3ce-4497-a2a0-8cc98b4f0923',
_sessionId: 'bbd35bf4-d3ce-4497-a2a0-8cc98b4f0923:1'
},
_modifiers: 0,
_pressedKeys: Set {}
},
_mouse: Mouse {
_client: Session {
domain: null,
_events: [Object],
_eventsCount: 15,
_maxListeners: undefined,
_lastId: 14,
_callbacks: Map {},
_connection: [Object],
_targetId: 'bbd35bf4-d3ce-4497-a2a0-8cc98b4f0923',
_sessionId: 'bbd35bf4-d3ce-4497-a2a0-8cc98b4f0923:1'
},
_keyboard: Keyboard {
_client: [Object],
_modifiers: 0,
_pressedKeys: Set {}
},
_x: 0,
_y: 0,
_button: 'none'
},
_frameManager: FrameManager {
domain: null,
_events: {
frameattached: [Function],
framedetached: [Function],
framenavigated: [Function]
},
_eventsCount: 3,
_maxListeners: undefined,
_client: Session {
domain: null,
_events: [Object],
_eventsCount: 15,
_maxListeners: undefined,
_lastId: 14,
_callbacks: Map {},
_connection: [Object],
_targetId: 'bbd35bf4-d3ce-4497-a2a0-8cc98b4f0923',
_sessionId: 'bbd35bf4-d3ce-4497-a2a0-8cc98b4f0923:1'
},
_mouse: Mouse {
_client: [Object],
_keyboard: [Object],
_x: 0,
_y: 0,
_button: 'none'
},
_frames: Map {
'232.1' => [Object]
},
_mainFrame: Frame {
_client: [Object],
_mouse: [Object],
_parentFrame: null,
_url: 'http://mytestdomain.com/',
_id: '232.1',
_defaultContextId: 4,
_waitTasks: Set {},
_childFrames: Set {},
_name: undefined,
_loadingFailed: false
}
},
_networkManager: NetworkManager {
domain: null,
_events: {
request: [Function],
response: [Function],
requestfailed: [Function],
requestfinished: [Function]
},
_eventsCount: 4,
_maxListeners: undefined,
_client: Session {
domain: null,
_events: [Object],
_eventsCount: 15,
_maxListeners: undefined,
_lastId: 14,
_callbacks: Map {},
_connection: [Object],
_targetId: 'bbd35bf4-d3ce-4497-a2a0-8cc98b4f0923',
_sessionId: 'bbd35bf4-d3ce-4497-a2a0-8cc98b4f0923:1'
},
_requestIdToRequest: Map {},
_interceptionIdToRequest: Map {
null => [Object], 'id-1' => [Object], 'id-2' => [Object], 'id-3' => [Object]
},
_extraHTTPHeaders: Map {},
_requestInterceptionEnabled: true,
_requestHashToRequestIds: Multimap {
_map: [Object]
},
_requestHashToInterceptions: Multimap {
_map: Map {}
}
},
_emulationManager: EmulationManager {
_client: Session {
domain: null,
_events: [Object],
_eventsCount: 15,
_maxListeners: undefined,
_lastId: 14,
_callbacks: Map {},
_connection: [Object],
_targetId: 'bbd35bf4-d3ce-4497-a2a0-8cc98b4f0923',
_sessionId: 'bbd35bf4-d3ce-4497-a2a0-8cc98b4f0923:1'
},
_emulatingMobile: false,
_injectedTouchScriptId: null
},
_tracing: Tracing {
_client: Session {
domain: null,
_events: [Object],
_eventsCount: 15,
_maxListeners: undefined,
_lastId: 14,
_callbacks: Map {},
_connection: [Object],
_targetId: 'bbd35bf4-d3ce-4497-a2a0-8cc98b4f0923',
_sessionId: 'bbd35bf4-d3ce-4497-a2a0-8cc98b4f0923:1'
},
_recording: false,
_path: ''
},
_pageBindings: Map {},
_ignoreHTTPSErrors: false,
_screenshotTaskQueue: TaskQueue {
_chain: Promise {
undefined
}
},
_viewport: {
width: 800,
height: 600
}
}
Can you please tell me how can I get all the URLs of the JavaScript network events with Puppeteer?
Check out the sample that intercepts image requests. Easy to modify that to look at other types of resource requests:
await page.setRequestInterceptionEnabled(true);
page.on('request', request => {
if (/\.js$/i.test(request.url)) {
// request for js resource
}
request.continue();
});
await page.goto('https://example.com');
Came across this post and SetRequestInterceptionEnabled has been renamed to
page.setRequestInterception(value)
Here is a piece of code i found on the Documentation:
const puppeteer = require('puppeteer');
puppeteer.launch().then(async browser => {
const page = await browser.newPage();
await page.setRequestInterception(true);
page.on('request', interceptedRequest => {
if (interceptedRequest.url.endsWith('.png') || interceptedRequest.url.endsWith('.jpg'))
interceptedRequest.abort();
else
interceptedRequest.continue();
});
await page.goto('https://example.com');
await browser.close();
});
NOTE Enabling request interception disables page caching.
Here is the URL for the puppeteer Documentation: Puppeteer Documentation
I think a solution more accurate to the question, and that does not interfere with the traffic, is using Page.on() listeners.
Something like:
page.on('request', (req) => console.log(req)); // 'requestFinished' and 'requestFailed' are other options
page.on('response', (res) => console.log(res));

Javascript Object properties (in Node) not getting logged or logged with a different name

I am using Node's formidable package from felixge. This is more a Javascript question than one specific to formidable, or so I think.
If I do a console.log on MYOBJ, I get the following:
{ file1:
File {
domain: null,
_events: {},
_eventsCount: 0,
_maxListeners: undefined,
size: 62464,
path: 'myDir/upload_e79d8d551721e2f399afbc39d5d5eaab.doc',
name: 'somefile.doc',
type: 'application/msword',
hash: null,
lastModifiedDate: Thu May 19 2016 20:22:24 GMT+0530 (IST),
_writeStream:
WriteStream {
_writableState: [Object],
writable: true,
domain: null,
_events: {},
_eventsCount: 0,
_maxListeners: undefined,
path: 'uploadDir/upload_1e0e9625e27f5c5172eaf5d18172f946.doc',
fd: null,
flags: 'w',
mode: 438,
start: undefined,
pos: undefined,
bytesWritten: 62464,
closed: true } } }
If I do a console.log, like so:
for (var filename in MYOBJ)
console.log(MYOBJ[filename]);
I get the following:
{ size: 62464,
path: 'myDir/upload_e79d8d551721e2f399afbc39d5d5eaab.doc',
name: 'somefile.doc',
type: 'application/msword',
mtime: '2016-05-19T14:52:24.129Z' }
My obvious question is:
Why are the other properties of "file1" not displayed? May be they are not the Object's "ownProperty"? Even so, why does "lastModifiedDate" become "mtime?"
Let me guess ... probably implementation for cosnole.log uses Object.getOwnPropertyDescriptor() and can list all non-enumerable values
var o = {}
Object.defineProperty(o, 'nonEnumerableValue', {value: 1})
console.log(o) // {}
console.log(o.nonEnumerableValue) // 1

Very large object dumped on each request

I have an application that I'm writing using express.js. When I run the application on my laptop, on each request, I see a very large object dumped as JSON to the console. It starts like this and goes on for many lines:
{ domain: null,
_events: null,
_maxListeners: 10,
socket:
{ domain: null,
_events:
{ drain: [Function: ondrain],
timeout: [Object],
error: [Function],
close: [Object] },
_maxListeners: 10,
_handle:
{ writeQueueSize: 0,
owner: [Circular],
onread: [Function: onread] },
_pendingWriteReqs: 0,
_flags: 0,
_connectQueueSize: 0,
destroyed: false,
errorEmitted: false,
bytesRead: 483,
_bytesDispatched: 0,
allowHalfOpen: true,
writable: true,
readable: true,
server:
The odd thing is that the exact same code doesn't do this on my PC. I guess this isn't an error as such but it means I can't see any useful output in the terminal. I'm at a loss as to why I'm getting this output.
I resolved the problem by deleting the node_modules directory in my project and than running npm install to re-download the required modules. Clearly something wasn't right in one of the modules.

Resources